CODEWITHSUNDEEP
jqueryjquery-validate
Ciel
Ciel

Reputation: 4440

jQuery Validate : Validating specific group

I am attempting to use jQuery Validate, and one of my requirements is to validate some specific groups as they go through a wizard user interface. I cannot seem to locate the jQuery Validate documentation for this feature, though, and can only find very vague references to it online.

My declaration is essentially like this;

form.validate({
                    groups: {
                        raceGroup: "race",
                        identityGroup: "name gender age"
                    },
                    rules: {
                        race: {
                            required: true,
                        },
                        gender: {
                            valueNotEquals: "Select Gender ...",
                            required: true
                        },
                        name: {
                            pattern: "^(?!.*[ ]{2})(?!.*[']{2})(?!.*[-]{2})(?:[a-zA-Z0-9 \p{L}'-]{3,64}$)$"
                        }
                    },
                    messages: {
                        race: {
                            required: "this is a required for your character."
                        },
                        name: {
                            pattern: "You have entered an invalid name."
                        },
                        gender: {
                            valueNotEquals: "You must select a valid gender.",
                            required: "You must select a valid gender."
                        }
                    }
                });

Okay, so I have the groups defined ... but now what? How can I check if everything within a group is valid? (or invalid)

Upvotes: 3

Views: 11453

Answers (1)

Sparky
Sparky

Reputation: 98718

groups: {
    raceGroup: "race",
    identityGroup: "name gender age"
},

"How can I check if everything within a group is valid? (or invalid)"

You don't. This is not how the groups option works.

Using the groups option, you are merely grouping together several error messages into one. Example: if you have a group of fields, each using the require_from_group rule (any 'one or more' fields out of the group are required), the groups option will ensure that only one message appears instead of repeated next to every input.

There is no defined option or standardized setup for creating validation groups.

If you're trying to do a stepped form, there are various approaches.

When I create multi-step forms, I use a unique set of <form> tags for each section. Then I use the .valid() method to test the section before moving to the next. (Don't forget to first initialize the plugin; call .validate(), on all forms on DOM ready.)

Then on the last section, I use .serialize() on each form and concatenate them into a data query string to be submitted.

Something like this...

$(document).ready(function() {

    $('#form1').validate({ // initialize form 1
        // rules
    });

    $('#gotoStep2').on('click', function() { // go to step 2
        if ($('#form1').valid()) {
            // code to reveal step 2 and hide step 1
        }
    });

    $('#form2').validate({ // initialize form 2
        // rules
    });

    $('#gotoStep3').on('click', function() { // go to step 3
        if ($('#form2').valid()) {
            // code to reveal step 3 and hide step 2
        }
    });

    $('#form3').validate({ // initialize form 3
        // rules,
        submitHandler: function (form) {
           // serialize and join data for all forms
           // ajax submit
           return false;
        }
    });

    // there is no third click handler since the plugin takes care of this with the
    // built-in submitHandler callback function on the last form.

});

Important to remember that my click handlers above are not using type="submit" buttons. These are regular buttons, either outside of the form tags or type="button".

Only the button on the very last form is a regular type="submit" button. That is because I am leveraging the plugin's built-in submitHandler callback function on only the very last form.

"Proof of Concept" DEMO: http://jsfiddle.net/N9UpD/

Also, see for reference:

https://stackoverflow.com/a/17975061/594235

Upvotes: 3

Related Questions