функция Override focusInvalid в JQuery проверки плагин

Question

Я использую jQuery validation plugin и пытаюсь адаптировать функцию focusInvalid к моим потребностям. На представить (с некорректными полями) Я хочу:

• Выделите первый некорректный элемент формы
• Сосредоточьтесь на этом элементе

Проверка должна вести себя почти так же, на IPad/iPhone/... как на рабочем столе, что не является тривиальным, так как можно сосредоточить элемент в iOS на основе пользовательского триггера. Но это совсем другая история - см. iPad HTML focus для более подробной информации.

Мой первый подход состоял в том, чтобы изменить jquery.validate.js непосредственно, чтобы проверить мои адаптации. Это то, что я придумал:

focusInvalid: function() { 
    if (this.settings.focusInvalid) { 
     try { 
      var firstInvalidElement = $(this.errorList[0].element); 
      $('html,body').scrollTop(firstInvalidElement.offset().top); 
      firstInvalidElement.focus() 
     } catch (e) { 
      // ignore IE throwing errors when focusing hidden elements 
     } 
    } 
} 

Работы как и ожидалось.

Теперь я хотел бы изменить поведение по умолчанию из focusInvalid извне (например: не изменять исходный JQuery проверки исходного кода).

Вот что я пытался до сих пор:

• overriding a function within the jquery validation plugin
• How to focus invalid fields with jQuery validate? (второй ответ)

Так, например:

invalidHandler: function(form, validator) { 
    var errors = validator.numberOfInvalids(); 
    if (errors) {      
     var firstInvalidElement = $(validator.errorList[0].element); 
     $('html,body').scrollTop(firstInvalidElement.offset().top); 
     firstInvalidElement.focus(); 
    } 
} 

К сожалению, я сейчас в состоянии для отправки формы (хотя есть еще недопустимые поля), если я нажимаю t он ENTER, а не кнопку отправки. Если я удалю этот пользовательский недопустимыйHandler, проверка не имеет такого поведения.

Любые идеи, в которых происходят такие изменения в поведении?

---

Edit:

Я создал JSFiddle, чтобы продемонстрировать эту проблему. Для того, чтобы воспроизвести:

• Введите действительный адрес электронной почты
• Нажмите клавишу ввода

---

Edit:

Вот фрагменты кода, как вставленные в JSFiddle.

HTML:

<div class="pre-login"> 
    <form action="login" method="post" id="login"> 
     <div class="form-group"> 
      <input type="email" class="form-control" name="email" id="email" placeholder="Email Address" autofocus="autofocus" required /> 
     </div> 
     <div class="form-group"> 
      <input type="password" class="form-control" name="pass" id="pass" placeholder="Password" required /> 
     </div> 
     <button type="submit" class="btn btn-success btn-block">Submit</button> 
    </form> 
</div> 

JavaScript:

$(function() { 
    $.validator.setDefaults({ 
     highlight: function (element) { 
      $(element).closest('.form-group').addClass('has-error'); 
     }, 
     unhighlight: function (element) { 
      $(element).closest('.form-group').removeClass('has-error'); 
     }, 
     errorElement: 'span', 
     errorClass: 'error-message', 
     errorPlacement: function (error, element) { 
      if (element.parent('.input-group').length) { 
       error.insertAfter(element.parent()); 
      } else { 
       error.insertAfter(element); 
      } 
     } 
    }); 

    $('#login').validate({ 
     invalidHandler: function(form, validator) { 
      var errors = validator.numberOfInvalids(); 
      if (errors) {      
       var firstInvalidElement = $(validator.errorList[0].element); 
       $('html,body').scrollTop(firstInvalidElement.offset().top); 
       firstInvalidElement.focus(); 
      } 
     }, 
     rules: { 
      email: { 
       required: true, 
       email: true 
      }, 
      pass: { 
       required: true 
      } 
     } 
    }); 
}); 

Answer 1

Именно эта линия в вашей invalidHandler функции, которая вызывает ошибочное "представление о Enter", пока еще есть ошибки, и я не знаю, почему.

firstInvalidElement.focus(); 

Установка focusInvalid в false не имеет никакого эффекта. Возможно, это ошибка, которую вы должны сообщить разработчику по адресу his GitHub page. (The focusInvalid() функция используется во внутренней функции submit обработки плагина.)

Однако, я не знаю, почему вы бы даже не нужно делать это здесь. Обработчик по умолчанию focusInvalid уже добавляет фокус в первое недопустимое поле. Даже без ошибки было бы излишним также попытаться сфокусировать его в пределах invalidHandler.

DEMO: https://jsfiddle.net/kfopux67/4/

Answer 2

Я знаю, что это очень старый пост, но это могло бы помочь другим. Вам просто нужно сделать focusInvalid ложь и написать invalidHandler, которая будет сосредоточена на первом элементе ошибки (здесь первое текстовое поле)

$("form").validate({ 
    focusInvalid: false, 
    invalidHandler: function() { 
     $(this).find(":input.error:first").focus(); 
    } 
});