具有自定义样式的jquery验证 <select> [重复]

Question

这个问题已经在这里有了答案：

• 用jQuery验证选择框验证并选择插件 2个答案

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

<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：

$(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：

<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>

Answer 1

问题在于，jquery选择的插件会隐藏select元素，并构建其自定义html来模仿它。

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

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

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