开发者

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

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开发者_Go百科 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!


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜