select2 and jquery validation not working properly
By default, the validation on a field is only triggered by these events (for a type="text"
field)...
onfocusout
, when the user leaves a field (validates just the field)onkeyup
, when the user is typing within a field (validates just the field)onclick
, when the user clicks thesubmit
button (validates the whole form)
If you need to programmatically trigger validation after you programmatically change the value of a field, then you need to invoke the .valid()
method on that field. It will effectively trigger validation similar as the events above.
$('#myField').valid(); // validates just field element with id="myField"
$('#myForm').valid(); // validates the whole form
So you'll need to find a method within select2 that is fired whenever the value is changed and put .valid()
inside of that. It looks like the change
event is what you'll need.
$("#vedit-filter").select2({
// your options here
}).on('change', function() {
$(this).valid();
});
user756659
Updated on June 04, 2022Comments
-
user756659 almost 2 years
Trying to use validation on select2 with a few issues :
the error message will show, but it will not remove when a valid entry is entered.
I am loading an initial value which works fine... the validator, however, does not recognize the value and tells me it is invalid... I have to manually type in the same value and then it validates, but still does not remove the error class/message showing it is valid.
form :
<div class="col-md-12 margin-bottom-30 form-group"> <div class="input-modal-group"> <label for="vedit-filter" class="f-14"><b>filter :</b></label> <input id="vedit-filter" type="text" name="settings[filter]" class="form-control select2"/> </div> </div> <input id="filter_default" type="hidden" name="settings[original]" value="<?php echo escapeStr($result[filter]); ?>"/>
js :
// get the default filter var default_filter = $("#filter_default").val(); $("#vedit-filter").select2({ //placeholder: "Select or enter...", allowClear: true, multiple: false, ajax: { dataType: 'json', url: '/process/get_filter_list.php', results: function (data) { return {results: data}; } }, createSearchChoice:function(term, data) { if ($(data).filter(function() { return this.text.localeCompare(term)===0; }).length===0) { return {id:term, text:term}; } }, initSelection : function (element, callback) { var obj= {id:default_filter, text:default_filter}; callback(obj); } }); $('#filters-edit').validate({ errorElement: 'span', //default input error message container errorClass: 'help-block', // default input error message class focusInvalid: false, // do not focus the last invalid input rules: { 'settings[filter]': { required: true } }, messages: { 'settings[filter]': { required: "Filter is required." } }, highlight: function (element) { // hightlight error inputs $(element) .closest('.form-group').addClass('has-error'); }, unhighlight: function (element) { // un-hightlight error inputs $(element) .closest('.form-group').removeClass('has-error'); }, errorPlacement: function (error, element) { error.insertAfter(element.closest('.input-modal-group')); }, // ajax submit submitHandler: function (form) { ...submit stuff below