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>