0x49D1
0x49D1

Reputation: 8704

JQuery validate with several validators per form

I have a single form with some div blocks inside it. All the divs have their fields and buttons. On button click i need to validate just THAT div(button's parent) and submit some fields to server asynchronously. Everything works fine, but not the validation. I use JQuery validation plugin. As i see i cant write such code:

<script type="text/javascript">
//.......
     // Validator for general information
        var userProfileGeneralValidator = $("#form1").validate({
            onkeyup: false,
            onclick: false,
            onfocusout: false,
            rules: {
                txtPrivateNumber: {
                    required: true
                }
            },
            messages: {
                txtPrivateNumber: {
                    required: "Required!"
                }
            },
            errorPlacement: function (error, element) {
                if (error.text() != "") {

                }
            },
            success: function (lbl) {

            }
        });

       // Validator for password information
        var userPasswordValidator = $("#form1").validate({
            onkeyup: false,
            onclick: false,
            onfocusout: false,
            rules: {
                txtOldPass: {
                    required: true,
                    minlength: 5
                }
            },
            messages: {
                txtOldPass: {
                    required: "Required!"
                }

            },
            errorPlacement: function (error, element) {
                if (error.text() != "") {
                }
            },
            success: function (lbl) {

            }
        });
</script>

And than call userPasswordValidator.form() on one button click and userProfileGeneralValidator.form() on other button click. Are there any tricks to achieve my goal: several form parts to validate separately with jquery?
PS: found one solution: put several forms in main form. One per div. But think its dirty.
UPDATE with solution ive used: in the end i've taken the answer from this question, but made the following changes:
i call the validate() method on whole form somewhere in document.ready. As validate options i add rules for all the controls i need to validate(they are nested in some divs as groups). Messages/errorPositions/Success i declare in the files, where i works with clicks on the buttons in that divs, where the controls to validate are nested. And to validate just that div i use:

var validator = $("#topUserProfile").validate(userProfileGeneralValidator);
// Validate and save general information
if (!validator.form()) {

    return;
}

Where #topUserProfile is the name of the div that is containing controls; userProfileGeneralValidator is variable that holds additional options for validation(messages/ position/ etc). Thank you all, who helped.

Upvotes: 0

Views: 1549

Answers (2)

politus
politus

Reputation: 6086

What I have used for this requirement is to pass multiple elements to the jquery validate plugin valid() method, for example some variation of this

$('#testdiv :input').valid()

If you just call $('#testdiv').valid() this won't work, but with the :input selector the call will tell you whether all of the form elements in the the jquery wrapped set are valid.

Upvotes: 3

Mike Robinson
Mike Robinson

Reputation: 25159

I've seen this before, but the quickest way is to create one form and initialize the entire thing with one .validate call. Then if you have sub-cases of validation, use individual element targeting with the .valid() method. Read more about that here: http://docs.jquery.com/Plugins/Validation/valid

Here's how it would look, assuming #txtOldPass is inside #form1:

$("#form1").validate();
$("button").click(function(e) {
  e.preventDefault();
  alert("Valid: " + $("#txtOldPass").valid());
});

Upvotes: 1

Related Questions