使用 jquery validate 验证具有相同类的多个表单答案

【问题标题】：Validating multiple forms with same class using jquery validate使用 jquery validate 验证具有相同类的多个表单
【发布时间】：2011-09-10 12:51:30
【问题描述】：

我在一页上大约有 10 个具有相同课程的表单。每个表单都应该能够单独验证和发送。我正在使用 jquery 验证插件。我无法让它工作，所有的表格都在提交第一个。除此之外，我似乎无法使用 $(this).find('.error').html(error);

在表单中定位错误消息 div

每个表单如下所示：

<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>

我的 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.")

          }

}
});

}
})
});

感谢任何帮助！

【问题讨论】：

标签： javascript jquery validation forms

【解决方案1】：

完整的工作 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")

          }

  }
 });


}
})
});

【讨论】：

【解决方案2】：

我看了你的 HTML n JS，你能试试这个吗？

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

基本上通过你的代码将你所有的 $(this) 变成形式

这是关于 $(this) 的常见错误，有时它会丢失它的引用。

希望有帮助

【讨论】：

这解决了FF中的问题。在 IE 中，如果您有一个有效的电子邮件地址，它就可以工作。错误放置在 IE 中不起作用。
我希望我可以，我需要 15 声望才能做到这一点:) 但它正在工作。我还更改了错误位置，使其在 IE 中工作：更改：form.find('.error').html(error);到：element.nextAll('div').html(error);