使用自定义样式< select>进行jquery验证 [英] jquery validation with custom style <select>

问题描述

我通过帮助jqueryValidation进行了注册.一切都会好起来，但我注意到，在Opera和Mozilla Firefox中，引导程序中的选择"看起来很难看.我使用 jquery-chosen 解决了我的问题，但是这两个脚本不想一起工作.边框不会改变颜色，并且不会显示错误消息.有什么帮助吗?这是我的代码:

I made registration with the help jqueryValidation. Everything would be fine, but I noticed, that "select" from bootstrap looks ugly in Opera and Mozilla Firefox. I used jquery-chosen to resolve my problem, but these two scripts don't want to work together. The border don't change color, and the error message will not show. Any help please? Here is my code:

<div class="form-group">     
     <select name="country" id="country" data-placeholder="YOUR COUNTRY*" class="chosen-select"  tabindex="2">                
                <option value=""></option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Aland Islands">Aland Islands</option>
                ...
                <option value="Zimbabwe">Zimbabwe</option>
     </select>                
</div>

MyValidation js:

MyValidation js:

$(document).ready(function(){

        $('#contact-form').validate({
        rules: {         
          country:{
            required: true
          }
        },       

    highlight: function(element) {          
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');              
    },
    unhighlight: function(element) {            
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');              
    }
      });
});

和自定义下拉列表js:

and custom dropdown js:

<script src="js/chosen.jquery.js" type="text/javascript"></script>  
  <script type="text/javascript">
    var config = {
      '.chosen-select' : {}
    }
    for (var selector in config) {
      $(selector).chosen(config[selector]);
    }
  </script>

推荐答案

问题是jquery selected插件会隐藏select元素，并构建其自定义html来模仿它.

The problem is that jquery chosen plugin hides the select element, and builds its custom html to imitate it.

在那个时候，jquery验证插件默认会忽略隐藏的元素，并且不会对其进行验证

At that jquery validation plugin ignores hidden elements by default and doesn't validate them

您可以在初始化时为验证器设置ignore属性，并强制其不忽略任何内容:

You can set ignore property for the validator when initializing and force it to not ignore anything:

$('#contact-form').validate({
    ignore: [],
    //your other validation settings
});

这篇关于使用自定义样式< select>进行jquery验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！