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/