Antrax Antrax - 1 year ago 142
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: {
categorie: "required"


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

You can try it here :

Thank you in advance for your answer.

Answer Source

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

    ignore: [],
    rules: {
        categorie: "required"
    errorPlacement: function (error, element) {
        if (":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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download