jQuery validate plugin: validate fields programmatically in certain sections on a page

Question

I'm trying to use the jQuery validation plugin (from here -->http://bassistance.de/jquery-plugins/jquery-plugin-validation/) to programmatically validate fields in certain sections of a page based on a button click (not a true form submission until the end the final section where it will validate the entire form) prior to proceeding to a new section. Essentially when you click a button in a particular section, the fields in that section need to validate. The first section of the page validates just fine, but when I get to the second section, it just proceeds right through without validating. What is the proper way to do this? Am I at least on the right track??
here's a sample of what i'm talking about. I can add more code if necessary.

// Step 1 section validation
var validateStep1 = $("#form1").validate({
    errorClass: "warning",
    onkeyup: false,
    onblur: false,
    onfocusout: true,
    rules: {
        "field1": {
            required: true,
        },
        "field2": {
            required: true,
            minlength: 1
        },
        "field3": {
            required: true,
        }
    }
});

// Step 2 section validation
var validateStep2 = $("#form1").validate({
    errorClass: "warning",
    onkeyup: false,
    onblur: false,
    onfocusout: true,
    rules: {
        "field4": {
            required: true,
        },
        "field5": {
            required: true,

        },
        "field6": {
            required: true,
        }
    }
});

// click events for buttons to proceed
$("#button1").click( function() {
    if (validateStep1.form()) {
        // proceed
    }
});
$("#button2").click( function() {
    if (validateStep2.form()) {
        // proceed
    }
});

Thanks in advance for your help!

Didier Ghys · Accepted Answer · 2011-11-08 10:35:49Z

4

I guess you cannot use two times differently the 'validate' method on the same form.

What you could use is the "depends" option on the rules objects. It allows to 'apply' the rule only based on the result of the "depends".

There is an example on this page: http://rocketsquared.com/wiki/Plugins/Validation/validate#toptions (go to the 'rules' documentation section)

$(".selector").validate({
    rules: {
        contact: {
            required: true,
            email: {
                depends: function(element) {
                    return $("#contactform_email:checked")
                }
            }
        }
    }
});

Hope this helps, d.

edited Nov 8, 2011 at 10:35

answered Nov 8, 2011 at 10:16

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Didier Ghys Over a year ago

Better later than never. Glad it (finally) helped :o)

Collectives™ on Stack Overflow

jQuery validate plugin: validate fields programmatically in certain sections on a page

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related