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

});

Answer 1

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/