JQuery validate with several validators per form

Question

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.

score 3 · Accepted Answer · answered Dec 11 '12 at 17:27

3

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.

answered Dec 11 '12 at 17:27

politus

5,996
1
33
42

Thank you, the solution is simple, complete and works just fine! So i can just validate any container i like without creating
! Strange, couldnt found this in the documentation..Its really outdated and incomplete :(
– 0x49D1 Dec 12 '12 at 07:30
mm..tested..not actually working without additional form tags.. http://stackoverflow.com/a/4938022/47672 – 0x49D1 Dec 12 '12 at 08:09
1

That is right, the input elements still have to be in a form, but you can use this to validate sections within a form. – politus Dec 12 '12 at 09:27
updated the question with the solution. To get there - ive used your answer. Thanks again :) have a nice day! – 0x49D1 Dec 12 '12 at 09:34

score 1 · Answer 2 · answered Dec 11 '12 at 14:59

1

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());
});

answered Dec 11 '12 at 14:59

Mike Robinson

24,971
8
61
83

The docs may be out of date? [This page](http://docs.jquery.com/Plugins/Validation/valid) shows that `.element()` is the method (boolean) for checking individual elements; like this: `$("#myform").validate().element("#myselect");` Although, I'm leaning towards `.valid()` as being the better way right now. – Sparky Dec 11 '12 at 16:15
Thank you, will test it tomorrow asap. – 0x49D1 Dec 11 '12 at 20:26

JQuery validate with several validators per form

2 Answers2