如何使用jquery.validation插件使select2工作？
我正在尝试使用jquey.validation插件validationselect2字段，但没有任何反应。
我想要选择必填字段。
我正在使用这个自定义validationfunction：
$.validator.addMethod("requiredcountry", function(value, element, arg){ return arg != value; }, "Value must not equal arg."); 这是规则：
rules: { country: { required: true, requiredcountry: "" } }
我应该使用哪个select2字段来匹配规则？
我很感激如何让select2与jquery.validation一起工作
10倍
只需在表单validation函数中添加ignore: [], 。 它将启用隐藏字段validation。因此，您将获得Select 2的validation
$("#ContactForm").validate({ ignore: [], rules: { //Rules }, messages: { //messages } });
我在博客文章中对此进行了详细介绍： http ： //chadkuehn.com/jquery-validate-select2/
将Select2放在SELECT标记上时，它会隐藏原始元素。 因此，在validation插件中，您必须在突出显示和取消突出显示时调整正确的包装标记。
highlight: function (element, errorClass, validClass) { var elem = $(element); if (elem.hasClass("select2-offscreen")) { $("#s2id_" + elem.attr("id") + " ul").addClass(errorClass); } else { elem.addClass(errorClass); } }, unhighlight: function (element, errorClass, validClass) { var elem = $(element); if (elem.hasClass("select2-offscreen")) { $("#s2id_" + elem.attr("id") + " ul").removeClass(errorClass); } else { elem.removeClass(errorClass); } }
在这里查看演示 。
作为提示，请考虑validationjs将自身绑定到选择的更改而不是选择2.这导致以下情况的问题：
- 有一个必需的
select box，并转换为select2 - 单击提交，错误显示需要选择框。
- 您从选择2中选择一些选项。
- validation错误不会自动隐藏
你可以修复它：
$("select").on("select2:close", function (e) { $(this).valid(); });
除了ABIRAMAN之外，这里还有一些代码
- 出现错误时，将select2框设为红色
- 列出select2框下面的错误
我发现让Select2与jQuery Validate一起使用取决于创建Select2控件时使用的标记。
对于插件的最实际使用，您可能会使用动态加载的数据（通过Web服务获得的数据与页面中的静态元素）。 根据他们的规范 ，实现这一目标的方法是将Select2附加到元素。 但是，默认情况下，jQuery Validate不会validationtype =“hidden”的元素。
为了使用jQuery Validatevalidation隐藏元素，必须修改jQuery Validate的配置对象中的ignore属性。 请参阅其规范中的ignore选项。 尝试将ignore值初始化为null以使validation触发。
只需在validationfunction中添加一行。
$('#_form_id').validate({ ignore: 'input[type=hidden]', rules: { //Rules }, messages: { //messages }, }
在corinnaerin发布的论坛@ https://github.com/select2/select2/issues/215上找到答案。 为我工作完美。 示例代码位于http://plnkr.co/edit/4QaSguIiYsJtLpuPF8Rc?p=preview
var $select = $('select').select2({ placeholder: 'Choose', allowClear: true }); /* * When you change the value the select via select2, it triggers * a 'change' event, but the jquery validation plugin * only re-validates on 'blur' */ $select.on('change', function() { $(this).trigger('blur'); }); $('#myForm').validate({ ignore: 'input[type=hidden], .select2-input, .select2-focusser' });
因为原始的隐藏选择没有显示，你必须调整它的错误信息位于选择
这在Bootstrap Validator（）中不起作用，因为validation器包含表单中的所有输入。 这意味着它将validationselect2插件的输入搜索字段。 这将干扰多选validation
要解决此问题，只需转到validator.js将select2输入搜索类.select2-search__field添加到忽略列表：
Validator.INPUT_SELECTOR = ':input:not([type="submit"], button, .select2-search__field):enabled:visible'
创建自定义规则时，还必须正确声明它。 由于您的自定义规则取决于参数，因此您必须在声明规则时传递参数
rules: { country: { required: true, requiredcountry: "your argument here" // <- declare the custom rule } }
$("select.select2-me").each(function(index, el) { if ($(this).is("[data-rule-required]") && $(this).attr("data-rule-required") == "true") { $(this).on('select2-close', function(e) { $(this).valid() }); } });
为我工作。
您可以查看以下链接： https ： //github.com/rkeshmir/select2-validation您可以在这里找到validationselect2组件的最简单方法。 构思id触发了对其更改事件中DOM中所有项的validation。 此外，我添加了所需的CSS规则，以突出显示输入的错误和成功状态。
看看我的代码。 我通过使用那些代码来解决我的问题……只有少量（css，jquery）代码
$(document).ready(function() { //form validations--------------------------------------------------------- $('#sample').validate({ ignore: [], errorClass: "error", errorElement: "span" }); $("#receiver_name").select2({ placeholder: "Receiver Name" }); $("#receiver_name").select2().change(function() { $(this).valid(); }); });
.error .select2-choice.select2-default, .error .select2-choices { color: #a94442; border-color: #a94442; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); } .error:focus, .error .select2-choice.select2-defaultLfocus, .error .select2-choicesLfocus { border-color: #843534; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483; } .select2-container .select2-choices .select2-search-field input, .select2-container .select2-choice, .select2-container .select2-choices, .error { border-radius: 1px; }
要validation’select2’输入，首先必须告诉jquery validate考虑隐藏元素：
$.validator.setDefaults({ ignore: [], });
这是我用于通过jquery validate指向select2和tagit错误的自定义高亮/不高亮：
$("#someform").validate({ rules: { nazwa: { required: true }, ilosc_w_opakowaniu: { required: "#czy_opakowanie_zbiorcze:checked" } }, messages: { nazwa: "Musisz wypełnić pole [Nazwa]", ilosc_w_opakowaniu: "Musisz podać ilość produktu w opakowaniu zbiorczym", }, highlight: function( element, errorClass, validClass ) { if ( element.type === "radio" ) { this.findByName( element.name ).addClass( errorClass ).removeClass( validClass ); } else { $( element ).addClass( errorClass ).removeClass( validClass ); } // select2 if( $(element).hasClass('select2-hidden-accessible') ){ dzik = $(element).next('span.select2'); if(dzik) dzik.addClass( errorClass ).removeClass( validClass ); } // tagit dzik2 = $(element).parent().find('ul.tagit') if( dzik2.length == 1 ) dzik2.addClass( errorClass ).removeClass( validClass ); }, unhighlight: function( element, errorClass, validClass ) { if ( element.type === "radio" ) { this.findByName( element.name ).removeClass( errorClass ).addClass( validClass ); } else { $( element ).removeClass( errorClass ).addClass( validClass ); } // select2 if( $(element).hasClass('select2-hidden-accessible') ){ dzik = $(element).next('span.select2'); if(dzik) dzik.removeClass( errorClass ).addClass( validClass ); } // tagit dzik2 = $(element).parent().find('ul.tagit') if( dzik2.length == 1 ) dzik2.removeClass( errorClass ).addClass( validClass ); } });
还有一些CSS：
/** select2 error hightight **/ .select2.error .select2-selection--single{ border-color:red !important; color:red !important; } /** tagit error highlight **/ .tagit.error{ border-color:red !important; color:red !important; }
我解决了这个问题，解决方法是为每个validate实例修改highlight，unhighlight以及所有errorPlacement方法。 但是，为了不修改每个文件，我将修改放在文件jquery.validate.js中
highlight: function( element, errorClass, validClass ) { if ( element.type === "radio" ) { this.findByName( element.name ).addClass( errorClass ).removeClass( validClass ); } else { var elem = $(element); if (elem.attr('readonly') == 'readonly') { if (elem.hasClass("input-group-addon")) { $("#" + elem.attr("id")).parent().addClass(errorClass); } else { $( element ).addClass( errorClass ).removeClass( validClass ); } } else { if (elem.hasClass("select2-hidden-accessible")) { $("#select2-" + elem.attr("id") + "-container").parent().addClass(errorClass); } else { $( element ).addClass( errorClass ).removeClass( validClass ); } } } }, unhighlight: function( element, errorClass, validClass ) { if ( element.type === "radio" ) { this.findByName( element.name ).removeClass( errorClass ).addClass( validClass ); } else { var elem = $(element); if (elem.attr('readonly') == 'readonly') { if (elem.hasClass("input-group-addon")) { $("#" + elem.attr("id")).parent().removeClass(errorClass); } else { $( element ).addClass( errorClass ).removeClass( validClass ); } } else { if (elem.hasClass("select2-hidden-accessible")) { $("#select2-" + elem.attr("id") + "-container").parent().removeClass(errorClass); } else { $( element ).removeClass( errorClass ).addClass( validClass ); } } } }, errorPlacement: function(error, element) { var elem = $(element); if (elem.attr('readonly') == 'readonly') { element = $("#" + elem.attr("id")).parent(); error.insertAfter(element); } else { if (elem.hasClass("select2-hidden-accessible")) { element = $("#select2-" + elem.attr("id") + "-container").parent().parent().parent(); error.insertAfter(element); } else { error.insertAfter(element); } } }