一个页面上的jquery.validator和两个联系表单将在提交时验证空的一个

Question

I currently have two of the same contact forms being used on a webpage. One is on every page- in the banner, and another version of it is in the main section of the contact page itself. This is what I use to validate it:

$(".contactform").each(function() {
    $(this).validate();
});

However, when I click submit on either of the forms, the opposite one of it (the unused one) comes back showing errors. I don't want the person to have to fill in both (as they are the exact same form) and am a bit confused on where to go from here.

Answer 1

What I ended up doing according to xnnyygn's answer was adding in separate .validate rules by id, when done by class or form this would not work and exhibit first selection error result.

$("#contactform1").validate({
  rules: {
    field: {
      required: true
    }
  }
});

$("#contactform2").validate({
  rules: {
    field: {
      required: true

    }
  }
});


$(document).ready(function(){
  $("#contactform1").validate();
  $("#contactform2").validate();
});

I ended up using two ids instead of a class or form selector here. Doing otherwise will not work. Lesson learned, with jquery.validator you must use ids.

Answer 2

This is my test HTML , from http://docs.jquery.com/Plugins/Validation#source , adding a duplicated form with same class.

I've tried to call validate directly, but the first form was validated when I press the second submit button. However, calling validate separately works well.

The reason why validator 'jumps' to another form may be that jquery validator only take the first element(form) and apply the rules. See the source for more detail.

Answer 3

Not sure if it solves this problem, but you shouldn't need to use '.each()' explicitly. Just write:

$(".contactform").validate();