jQuery驗證插件意外工作

Question

我使用jQuery mobile主題和jQuery validate plugin進行驗證。插件的行爲是不可預料的。第一眼看到我的html代碼

<ul data-role="listview" data-inset="true" id="updatepage"> 
    <form method="POST" action="/update-account-info" accept-charset="UTF-8" data-ajax="false" id="updateUser"> 
     <div data-role="content"> 
      <li data-role="fieldcontain"> 
       <input required="required" class="slide1el" id="first_name" data-clear-btn="true" placeholder="First Name" name="first_name" type="text" value="Awais">    
       <div class="error-wrapper"></div> 
      </li> 

      <li data-role="fieldcontain"> 
       <input class="slide1el" id="last_name" data-clear-btn="true" placeholder="Last Name" name="last_name" type="text" value="Qarni">    
       <div class="error-wrapper"></div> 
      </li> 

      <li data-role="fieldcontain"> 
       <input class="slide1el" id="website" data-clear-btn="true" placeholder="Website URL" name="website" type="text">    
       <div class="error-wrapper"></div> 
      </li> 
      <div> 
       <div class="ui-block-a"><button type="button" data-theme="a">Cancel</button></div> 
       <div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div> 
      </div> 
     </div> 
    </form> 
</ul> 

這裏是我的javascrip代碼

​​

我目前在做什麼，當用戶提交表單，我嘗試驗證的形式。如果輸入字段爲空，請在該字段中添加一個紅色邊框，並以div class=error-wrapper的格式顯示自定義錯誤消息。

但是，當我提交錯誤按鈕，它只創建它在DOM中找到的第一個空字段的焦點。當我點擊DOM中的任何地方時，它會顯示錯誤類並突出顯示文本框。我在螢火蟲中看到它，當我點擊提交按鈕時，它將一個ui-focus類添加到空元素。當我點擊DOM中的任何地方時，ui-focus類會自動刪除，並添加我的錯誤類。

我甚至試圖刪除ui-focus類，但它不起作用。請引導我，我做錯了什麼？

Answer 1

從代碼中不清楚什麼是高亮/高亮功能的要點？

我發現如果我刪除它們，並設置focusInvalid:false一切都開始很好地工作。

所以你調用validate最終看起來像這樣（我拿出了簡潔的規則和消息）：

jQuery("#updateUser").validate({ 
    focusCleanup: true, 
    focusInvalid: false, 
    /* rules and messages here */  
    onkeyup: false, 
    errorPlacement: function (error, element) { 
     element.parents('li').find('div.error-wrapper').html(error) 
     element.parents('li').find('div.error-wrapper').find('label').removeClass('error_text'); 
    }, 
    errorClass : "error_text", 
    validClass : "ui-focus" 
}); 

它的工作原理爲我所期望的，在這裏看到：http://jsfiddle.net/ryleyb/DC5Sz/1/