Как показать сообщения проверки HTML5 при изменении ввода?

Question

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

Мне удается показать сообщение при нажатии кнопки, но я действительно хочу показать его при изменении ввода.

Это работает:

$('#link').click(function() { 
    if (!$('#form')[0].checkValidity()) { 
     $('#submit').click(); 
    } 
}); 

Но не это:

$('#input').change(function() { 
    if (!$('#form')[0].checkValidity()) { 
     $('#submit').click(); 
    } 
}); 

Смотрите здесь для живой демонстрации: http://jsfiddle.net/1anyLswt/2/

Если очистить поле, то нажмите кнопку "тест", сообщение : OK.

Если вы опустошите поле и нажмите клавишу ввода, появится сообщение: OK.

Но если вы очистили поле, а затем щелкните в другом месте, сообщение не отображается: KO.

Благодарим за помощь. Использование

Answer 1

Попробуйте мой FIDDLE

$('#input').keyup(function() { 
    if (!$('#form')[0].checkValidity()) { 
     $('#submit').click(); 
    } 
}); 

Answer 2

Сделать из jquery.validate

<script src="js/jquery.validate.js"></script> 
<script src="js/additional-methods.js"></script> 

    <script type="text/javascript"> 
    // When the document is ready 
    $(document).ready(function() 
    { 

     $("#form").validate({ 
      rules: 
      { 
       name: "test", 

       test: 
       { 
        required: true, 
        number: true 
       } 
      }, 
      messages: 
      { 
       test: "Enter Number", 

      }, 
     //perform an AJAX post to ajax.php 
     }); 
     $("#form").submit(function(e) 
     { 
      var testval = $("#form"); 
      if($("#ajaxform").valid()) 
      { 
        // Do Processing here 
      } 

     }); 
    }); 
    </script> 

Answer 3

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

подобный плагин Jquery проверка

после ввода ссылки на него и добавить следующую строку в ваш сценарий

jQuery.validator.setDefaults({ 
debug: true, 
success: "valid" 
}); 
var form = $("#myform"); 
form.validate(); 
$("button").click(function() { 
alert("Valid: " + form.valid()); 
}); 

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

Jquery Validation