jquery chosen and validation: validation doesn't work

Question

There is a state select field and city div.

1) At first state select field is filled and the city div field is empty

2) Once the state is selected, it gets the cities for the selected state using ajax and fills the city div with select box with required attribute.

It worked fine (validation works at this stage). Now I am adding the chosen jquery plugin to city select box in the ajax.

<script>
$(function(){
    $.post('ajax.php',{stateid:stateid}).done(function(data){
         $('#citybox').html(data).chosen();
    });
});
</script>

Chosen works fine, but the validation doesn't work on city select box

Answer 1

jQuery validate ignores the hidden element, and since the Chosen plugin adds visibility:hidden attribute to the select, try:

$.validator.setDefaults({ ignore: ":hidden:not(select)" }) //for all select

add this line just before validate() function.