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.

politus · Accepted Answer · 2012-12-11 17:27:06Z

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, 2012 at 17:27

politus

6,0862 gold badges35 silver badges43 bronze badges

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

4 Comments

0x49D1 Over a year ago

Thank you, the solution is simple, complete and works just fine! So i can just validate any container i like without creating <form>! Strange, couldnt found this in the documentation..Its really outdated and incomplete :(

0x49D1 Over a year ago

mm..tested..not actually working without additional form tags.. stackoverflow.com/a/4938022/47672

politus Over a year ago

That is right, the input elements still have to be in a form, but you can use this to validate sections within a form.

0x49D1 Over a year ago

updated the question with the solution. To get there - ive used your answer. Thanks again :) have a nice day!

Mike Robinson · Accepted Answer · 2012-12-11 14:59:25Z

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, 2012 at 14:59

Mike Robinson

25.2k8 gold badges64 silver badges83 bronze badges

2 Comments

Sparky Over a year ago

The docs may be out of date? This page 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.

0x49D1 Over a year ago

Thank you, will test it tomorrow asap.

Collectives™ on Stack Overflow

JQuery validate with several validators per form

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related