Validating multiple forms with same class using jquery validate

Question

I have about 10 forms on one page with the same class. Each form should be able to validate and send individually. I am using the jquery validate plugin. I can't get it to work and all the forms are submitting the first one. Besides that I can't seem to target the errormessage div within a form with $(this).find('.error').html(error);

Each form looks like this:

<form method="post" class="alertform" action="">
<input type="text" onclick="clearText(this)" value="" class="required email" name="email">
<input type="hidden" value="1000004011320719" name="productid" class="productid">
<input type="submit" class="button" name="button" value="Set alert">
<div class="error">&nbsp;</div>
</form>

My JS:

$('.alertform').each( function(){
$(this).validate({
rules: {
        emailadres: {
            required: true,
            email: true
            }
    },
    messages: {

                    emailadres: {
            required: "Message 1",
            minlength: "Message 2",
            email: "Message 3"
            }

            },
          errorPlacement: function(error, element) {
 $(this).find('.error').html(error);
},
success: function(label) {
label.addClass("valid").text("")
},
submitHandler: function() { 

  var emailadres = $(this).find("input.email").val();
  var productid = $(this).find("input.productid").val();

  var dataString = 'emailadres=' + emailadres + '&productid=' + productid;

    $.ajax({
  type: "POST",
  url: "/setalert.php",
  data: dataString,
  success: function(msg) {

    if (msg==1) {
    $(this).find(".email").attr("value", ""); 

    $(this).find('.error').html("Pricealert set.")


    }
    else {


    $(this).find('.error').html("Oops.")

          }

}
});

}
})
});

Any help is appreciated!

kororo · Accepted Answer · 2011-06-08 06:17:29Z

14

I had a look at your HTML n JS, can you try this?

$('.alertform').each( function(){
   var form = $(this);
   form.validate({

Basically change all your $(this) into form through out ur code

This is common mistake about $(this), sometime it lost its reference.

Hope helps

:)

answered Jun 8, 2011 at 6:17

kororo

2,02217 silver badges27 bronze badges

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

2 Comments

dacross Over a year ago

This solves the problem in FF. In IE it works if you have a valid e-mailadres. The errorplacement doesn't work in IE.

dacross Over a year ago

I wish i could, i need 15 reputation to do that:) But it's working. I also changed the error placement, to get it working in IE: Changed: form.find('.error').html(error); To: element.nextAll('div').html(error);

dacross · Accepted Answer · 2011-06-09 08:16:20Z

The complete working JS:

$('.alertform').each( function(){

var form = $(this);
form.validate({
rules: {
        emailadres: {
            required: true,
            email: true
            }
    },
    messages: {

                    emailadres: {
            required: "Required",
            minlength: "Fill it in",
            email: "Not valid"
            }

            },
          errorPlacement: function(error, element) {
          element.nextAll('div').html(error);

},
success: function(label) {
 label.addClass("valid").text("")
},

submitHandler: function() { 

  var email = form.find("input.email").val();
  var productid = form.find("input.productid").val();

  var dataString = 'email=' + email + '&productid=' + productid;

    $.ajax({
  type: "POST",
  url: "/myurl.php",
  data: dataString,
  success: function(msg) {

    if (msg==1) {
    form.find(".email").attr("value", ""); 

    form.find('.error').html("Thanks")


    }
    else {


    form.find('.error').html("Something went wrong")

          }

  }
 });


}
})
});

Collectives™ on Stack Overflow

Validating multiple forms with same class using jquery validate

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related