jquery validation with custom style <select> [duplicate]

问题

This question already has answers here:

Validating select box with jquery validate and chosen plugins (2 answers)

Closed 4 years ago.

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:

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

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>

回答1:

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

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

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

来源：https://stackoverflow.com/questions/27469515/jquery-validation-with-custom-style-select