errorPlacement參數打破jQuery驗證插件

Question

我有一個我正在工作的表單和我的驗證JavaScript（jQuery & jQuery驗證插件）工作，直到一個點。我已經設置了一個jsfiddle來顯示它處於工作狀態：http://jsfiddle.net/5Ukv2/

但是，當我使用errorPlacement函數/參數時，它會中斷。錯誤發生在我指定的位置，但是當我更新輸入（即任何按鍵）時，會添加多個錯誤，並且當條目根據JavaScript有效時，錯誤不會從我的HTML中刪除：http://jsfiddle.net/5Ukv2/1/

另外，只要我輸入到輸入字段中，驗證就開始發生;與額外的和未消除的錯誤元素相比，這個問題很小。

我在做什麼錯？

下面附上代碼以供參考以及jsfiddles。我評論了幾個方法，因爲他們正在進行ajax調用，而這些調用在這裏不起作用，但驗證的行爲相同。

HTML：

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

的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); 
     }    


    }); 

});​