errorPlacement 参数破坏 jQuery 验证插件

Question

我有一个我正在处理的表单，并且我的验证 JavaScript（jQuery 和 jQuery 验证插件）可以正常工作。我已经设置了一个 jsfiddle 来显示它的工作状态：http://jsfiddle.net/5Ukv2/

但是，当我使用 errorPlacement 函数/参数时，它会中断。错误出现在我指定的位置，但每当我更新输入（即任何击键）时都会添加多个错误，并且当根据 JavaScript 输入有效时，错误不会从我的 HTML 中删除：http://jsfiddle.net/5Ukv2/1/

此外，一旦我在输入字段中键入内容，验证就会开始；与额外的和未删除的错误元素相比，这个问题是次要的。

我做错了什么？

下面附上的代码供参考以及在 jsfiddles 中。我评论了几个方法，因为它们进行的 ajax 调用在这里不起作用，但验证的作用是一样的。

HTML：

输入你的邮箱来玩：

JavaScript：

// JavaScript Document

$(function(){

$("#enterForm").validate({
    rules: {
        email: {
            email: true,
            required: true,
            remote: {url:"email_valid.php", async:false}
        }
    },
    messages:{
            email:{
                email: "Please enter a valid email address",
                required: "Please enter an email address",
                remote: "That is not a valid domain"
                }
    },
    submitHandler: function(form) {

        var formData = $('form').serialize();
        $.ajax({
          type: 'POST',
          url: "email_submit.php",
          data: formData,
          success: function(data){
              if(data.subscriber && data.valid_email)
                window.location = "calendar.html";
              else if( !data.valid_email)
                alert("Please enter a valid email");
              else if( !data.subscriber)
                alert("Open sign up form");
          },
          error: function(data){
              alert("e:" + data);
              console.log(data);
          },
          dataType: "JSON"
        });

        return false;
    },
    errorPlacement: function (error, element){
        if(  element.attr("name") == "email" ){
            error.insertAfter("#enterForm");
        } 
        else
            error.insertAfter(element);
    }               

    });

});

Answer 1

看起来验证器插件希望将错误放置在表单元素中的某个位置。当它在寻找要隐藏或显示的“错误”元素时，它必须将搜索限制在当前表单中。这允许您在页面上有多个表单，并且对一个表单的更改不会影响其他表单。

可以说，这可能是插件中的一个错误。这是对您的表单的修改（请参阅fiddle）

        <form action="email_submit.php" method="post" name="enterForm" id="enterForm">
            <label for="email">Enter your email to play:</label> 
            <input type="text" name="email" id="email" value=""  /> 
            <input type="submit" value="Enter" name="submit" class="submit" />             
        <div id="error_container"></div>
        </form>

​

$(function(){

    $("#enterForm").validate({
        rules: {
            email: {
                email: true,
                required: true/*,
                remote: {url:"email_valid.php", async:false}*/
            }
        },
        messages:{
                email:{
                    email: "Please enter a valid email address",
                    required: "Please enter an email address"/*,
                    remote: "That is not a valid domain"*/
                    }
        },
        submitHandler: function(form) {

            var formData = $('form').serialize();
            $.ajax({
              type: 'POST',
              url: "email_submit.php",
              data: formData,
              success: function(data){
                  if(data.subscriber && data.valid_email)
                      window.location = "calendar.html";
                  else if( !data.valid_email)
                      alert("Please enter a valid email");
                  else if( !data.subscriber)
                      alert("Open sign up form");
              },
              error: function(data){
                  alert("e:" + data);
                  console.log(data);
              },
              dataType: "JSON"
            });


            return false;
        }, //uncomment this errorPlacement method
        errorPlacement: function (error, element){
            if(  element.attr("name") == "email" ){
                error.insertAfter("#error_container");
            } 
            else
                error.insertAfter(element);
        }               


    });

});​