2016-12-28 3 views
0

Я использую JQuery проверки плагин, чтобы проверить мою форму, и я хотел бы добавить задержку 500ms перед входом в настоящее время подтверждено, поскольку он вызывает появиться ярлык ошибки и исчезают очень быстро.JQuery Validate - Добавить задержку KeyUp Validation

Я хотел бы получить ответ, связанный с плагином JQuery Validate, а не только JQuery.

Например, когда есть мин длина 2 полукокса, Я хотел бы его иметь задержку 500 мс перед отображением метки ошибки + красная граница.
(Если в моем фрагменте кода он не работает, попробуйте отправить форму, когда она имеет 3 символов и после этого типа 1 символ.)

$(document).ready(function() { 
 
    $("#myForm").validate({ 
 
     debug:true, 
 
     rules: { 
 
      userName: { 
 
       required: true, 
 
       minlength: 2 
 
      } 
 
     }, 
 
     submitHandler: function(form) 
 
     { 
 
      alert("pass validation"); 
 
     } 
 
    }); 
 
    
 
    
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> 
 

 
    
 
<form id="myForm"> 
 
    <input type="text" name="userName" placeholder="enter your name" value=""</> 
 
    <input type="submit" name="submit" value="submit"/> 
 
</form>

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

+0

Возможный дубликат [jQuery .keyup() delay] (http://stackoverflow.com/questions/1909441/jquery-keyup-delay) – tremendows

+0

Посмотрите здесь: http://stackoverflow.com/questions/1909441/jquery-keyup-delay – tremendows

+0

[Нет мерцания и нет красной границы] (http://jsfiddle.net/vfyn4akq/). Просьба представить код, который на самом деле демонстрирует эту проблему. – Sparky

ответ

0

Просто оберните функции по умолчанию onkeyup в setTimeout() функции ...

$("#myForm").validate({ 
    onkeyup: function(element, event) { 
     var t = this; 
     setTimeout(function() { 
      // this is the default function 
      var excludedKeys = [ 
       16, 17, 18, 20, 35, 36, 37, 
       38, 39, 40, 45, 144, 225 
      ]; 
      if (event.which === 9 && t.elementValue(element) === "" || $.inArray(event.keyCode, excludedKeys) !== -1) { 
       return; 
      } else if (element.name in t.submitted || element.name in t.invalid) { 
       t.element(element); 
      } // end default 
     }, 3000); // 3-second delay 
    }, 
    .... 

DEMO: jsfiddle.net/yf0ayLnv/

Однако этот подход все еще нуждается в некоторой доработке. Существуют сценарии, в которых таймер все еще работает, пока вы вызываете и очищаете ошибку проверки. Я оставил таймер на 3 секунды, чтобы продемонстрировать это условие.

+0

Я постараюсь завтра, надеюсь, это не испортит мои собственные методы. спасибо –

Смежные вопросы