jQuery validate плагин работает неожиданно

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 код

jQuery("#updateUser").validate({ 
    errorElement: "label", 
    focusCleanup: true, 
    rules: { 

     first_name: { 
      required : true 
     }, 
     last_name: { 
      required : true 
     }, 
     website: { 
      required : true, 
      url : true 
     } 
    }, 
    messages : { 
     first_name : { 
      required : 'First Name is required', 
     }, 
     last_name : { 
      required : 'Last Name is required', 
     }, 
     website : { 
      required : 'Website is required', 
      url : 'Please enter correct URL' 
     } 
    }, 
    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'); 
    }, 
    // set the errorClass as a random string to prevent label disappearing when valid 
    errorClass : "error_text", 
    validClass : "ui-focus", 
    // use highlight and unhighlight 
    highlight: function (element, errorClass, validClass) { 

     jQuery(element).parent().addClass(errorClass).removeClass(validClass); 

    }, 
    unhighlight: function (element, errorClass, validClass) { 
     jQuery(element).parent().removeClass(errorClass) 
     jQuery(element).parent().next().find('label').remove(); 
     jQuery(element).parent().parent().next().find('label').remove(); 

    } 
}); 

То, что я сейчас делаю, что, когда пользователь отправляет форму, я пытаюсь проверить форму. Если поле ввода пуст, добавьте красную рамку в поле и покажите собственное сообщение об ошибке в div class=error-wrapper.

Но когда я отправляю кнопку ошибки, она создает фокус только на первом пустом поле, которое оно находит в DOM. И когда я нажимаю в любом месте DOM, он показывает класс ошибки и выделяет текстовое поле. Я видел его в firebug, когда я нажимаю кнопку отправки, он добавляет класс 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/