Validate two form with one submit button using jquery

Question

I have 2 forms in 1 page form.php. In 1st form I have 1 input field and 1 textfield. And second form I have an upload image button, that I use to upload without redirecting so onchange I am submitting that form.

But if user has not selected any image the final form should not submit.

Here is my code:

$("#storyform").validate({
  rules: {
    story: {
      required: true,
      maxlength: 250
    },
    place: "required"


  },
  messages: {
    story: {
      required: "Please write your story",
      maxlength: $.format("At Max {0} characters !")
    },

    place: "Please write your place"

  },
  errorElement: "span",
  wrapper: "span" // a wrapper around the error message

});

Sparky · Accepted Answer · 2012-11-20 18:41:00Z

2

Initialize .validate() on each form separately. Then just test to see if the first form is valid using .valid() within the submitHandler on the second form.

$(document).ready(function(){

    $("#firstForm").validate({  // initialize form validation on form 1
        // rules & other options
    });

    $("#secondForm").validate({ // initialize form validation on form 2
        // rules & other options,

        errorPlacement: function(error, element) {
            $("#firstForm").valid();  // forces test on form 1 when form 2 has errors
            error.insertAfter(element); // default error placement
        },
        submitHandler: function(form) {
            if ($("#firstForm").valid()) {  // test to see if form 1 is valid before submitting form 2
               form.submit;
            }
            return false;
        }
    });

});

$("#firstForm").valid() is used above in two locations for the following two cases:

1) Form #2 is valid; so we must test for Form #1 validity within submitHandler: as a condition of form submission.

2) Form #2 is invalid; so we must trigger a Form #1 validity test within errorPlacement:. Since we're using errorPlacement:, we must specify it, or errors will not appear. In the example, I simply used the default error placement code.

EDIT:

In order to get second form to display errors at same time as first form, also add .valid() to the second form's errorPlacement: option, which forces a test on form 1 when form 2 has an error. See edited code above.

Working DEMO: http://jsfiddle.net/eLsDs/1/

EDIT 2:

I can't see your HTML because you've not included it, but I modified my demo to include the code from your OP.

Demo using OP's code: http://jsfiddle.net/eLsDs/2/

edited Nov 20, 2012 at 18:41

answered Nov 20, 2012 at 15:31

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

3 Comments

Rashmi Kumari Over a year ago

still not validating the second form

Rashmi Kumari Over a year ago

Thanks @sparky,But i have one problem in second form i need a input field to upload image,and that input field i am hiding and showing a text ,but if i m doing so ,validation is not working.here is demo link jsfiddle.net/rashvish18/eLsDs/6

Sparky Over a year ago

@Rashmi, Very glad to help, but I think you should make that into a new question because there's no way to help with that part inside comments here.

politus · Accepted Answer · 2012-11-20 15:20:28Z

1

you must have your reasons to use two forms, so call this to check whether the other form is valid

$('#otherform').validate().valid()

answered Nov 20, 2012 at 15:20

politus

6,0862 gold badges35 silver badges43 bronze badges

3 Comments

Sparky Over a year ago

Your code could cause validation timing problems. Every single time you call that, you re-intialize the form with .validate(). Form only needs to be initialized once upon DOM ready.

politus Over a year ago

no, it doesn't. There is a (passing) test in the plugin project that tests that "calling validate() multiple times [returns] the same validator instance". Check github.com/jzaefferer/jquery-validation/blob/master/test/…

Sparky Over a year ago

However, your answer as posted, only initializes the form the first time you want to test to see if it's valid. This means that no interactive validation could have taken place prior, or that you may have to test twice.

Collectives™ on Stack Overflow

Validate two form with one submit button using jquery

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related