如何使用jquery.validation插件使select2工作？

Question

我正在尝试使用jquey.validation插件验证select2字段,但没有任何反应.

我想要选择必填字段.

我正在使用这个自定义验证功能:

$.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倍

Answer 1

只需添加ignore: [],您的表单验证功能.它将启用隐藏字段验证.因此,您将获得Select 2的验证

$("#ContactForm").validate({
  ignore: [],       
  rules: {
    //Rules
  },
  messages: {
    //messages
  }
});

Answer 2

我在博客文章中对此进行了详细介绍:http://chadkuehn.com/jquery-validate-select2/

将Select2放在SELECT标记上时,它会隐藏原始元素.因此,在验证插件中,您必须在突出显示和取消突出显示时调整正确的包装标记.

    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);
        }
    }

在这里查看演示.

Answer 3

作为提示,请考虑验证js将自身绑定到select而不是select 2的更改.这会导致以下情况出现问题:

1. 有一个必需的 select box并转换为select2
2. 单击提交,错误显示需要选择框.
3. 您从选择2中选择一些选项.
4. 验证错误不会自动隐藏

你可以修复它:

     $("select").on("select2:close", function (e) {  
        $(this).valid(); 
    });

Answer 4

除了ABIRAMAN之外,这里还有一些代码

• 出现错误时,将select2框设为红色
• 列出select2框下面的错误

<style>
  span.error{
    outline: none;
    border: 1px solid #800000;
    box-shadow: 0 0 5px 1px #800000;
  }
</style>

<script>
 $("#form").validate({
     rules: {
       email: "required"
     },
     highlight: function (element, errorClass, validClass) {
       var elem = $(element);
       if (elem.hasClass("select2-hidden-accessible")) {
           $("#select2-" + elem.attr("id") + "-container").parent().addClass(errorClass); 
       } else {
           elem.addClass(errorClass);
       }
     },    
     unhighlight: function (element, errorClass, validClass) {
         var elem = $(element);
         if (elem.hasClass("select2-hidden-accessible")) {
              $("#select2-" + elem.attr("id") + "-container").parent().removeClass(errorClass);
         } else {
             elem.removeClass(errorClass);
         }
     },
     errorPlacement: function(error, element) {
       var elem = $(element);
       if (elem.hasClass("select2-hidden-accessible")) {
           element = $("#select2-" + elem.attr("id") + "-container").parent(); 
           error.insertAfter(element);
       } else {
           error.insertAfter(element);
       }
     }
   });

$('select').select2({}).on("change", function (e) {
  $(this).valid()
});
</script>

Answer 5

在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'
      });

Answer 6

我发现让Select2与jQuery Validate一起工作非常依赖于创建Select2控件时使用的标记.

对于插件的最实际使用,您可能会使用动态加载的数据(通过Web服务获得的数据与<option/>页面中的静态元素).而且按照他们的规范,做到这一点的方法是通过将选择二至<input type="hidden"/>元素.但是,默认情况下,jQuery Validate不会验证type ="hidden"的元素.

为了使用jQuery Validate验证隐藏的元素,必须修改ignorejQuery Validate的配置对象中的属性.请参阅ignore其规范中的选项.尝试初始化ignore值null以使验证触发.

Answer 7

创建自定义规则时，您还必须正确声明它。由于您的自定义规则取决于参数，因此在声明规则时必须传递该参数

rules: {
   country: {
       required: true,
       requiredcountry: "your argument here"  // <- declare the custom rule
   }
}