Question

我使用帮助jqueryValidation进行了注册。一切都会好的，但我注意到，在Opera和Mozilla Firefox中，来自bootstrap的“select”看起来很难看。我使用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
});

使用自定义样式<select> </select>进行jquery验证

1 个答案: