select2和jqueryvalidation无法正常工作

尝试在select2上使用validation,但有一些问题:

  • 将显示错误消息,但输入有效条目时不会删除。

  • 我正在加载一个工作正常的初始值…然而,validation器不识别该值并告诉我它无效…我必须手动输入相同的值然后validation,但仍然不会删除显示它的错误类/消息是有效的。

forms:

<input id="filter_default" type="hidden" name="settings[original]" value=""/>

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 

默认情况下,字段上的validation仅由这些事件触发(对于type="text"字段)…

  • onfocusout ,当用户离开字段时(仅validation字段)

  • onkeyup ,当用户在字段中键入时(仅validation字段)

  • onclick ,当用户点击submit按钮时(validation整个表单)

如果在以编程方式更改字段的值之后需要以编程方式触发validation,则需要在该字段上调用.valid()方法 。 它将有效地触发与上述事件类似的validation。

 $('#myField').valid(); // validates just field element with id="myField" $('#myForm').valid(); // validates the whole form 

因此,您需要在select2中找到一个方法,只要更改了值就会触发该方法并在其中放置.valid() 。 看起来change事件就是您需要的。

 $("#vedit-filter").select2({ // your options here }).on('change', function() { $(this).valid(); });