jquery-validate: validation not working on an ui-accordion

Question

I'm using jquery-validate to validate a form. Jquery-validate works well and doesn't send form if a required field is empty. But if my form is into an jquery-ui accordion, the form is sent.

Rules:

$("#form_master").validate({
    rules: {
        categorie: "required"
    }});`

Accordion:

$("#accordion").accordion({ autoHeight: true, navigation: true, });

You can try it here : http://jsfiddle.net/Zv76Y/4/

Thank you in advance for your answer.

Answer 1

It is because, the validator by default ignores hidden elements.

So when you use an accordion the input fields are hidden so they are not validated

$("#form_master").validate({
    ignore: [],
    rules: {
        categorie: "required"
    },
    errorPlacement: function (error, element) {
        if (element.is(":radio")) error.appendTo(element.parent().next().next());
    }
});

Demo: Fiddle

Note: You may have to highlight the accordion tags with error so that users will now that there is error