Antrax Antrax - 7 months ago 57
Javascript Question

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

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

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