Как программно отображать пузырьки ошибки проверки на стороне клиента HTML5?

Я пытаюсь использовать проверку на стороне клиента HTML5 (т.е. внутри формы), но не могу понять, как программно отображать пузыри ошибок проверки.

Рассмотрим следующее:

<form id="myForm">
    <input type="text" id="number" min="1" max="10" step="3" required>
</form>

Если есть каноническая кнопка submit (i.e <input type="submit">), и есть ошибки проверки, пользовательский агент остановит передачу и отображение пользовательского интерфейса пользователю:

Но если вместо ввода submit пользователь нажимает якорь, который выполняет javascript (например, веб-формы ASP.net):

<a href='javascript:SaveChanges()'>Save Quantity</a>

<script>
   function SaveChanges()
   {
      var form = document.getElementById('myForm');
      if (form === null) return;

      if (!form.checkValidity())
      {
         //We reach here, but no UI is displayed
         return;
      }
      form.submit();       
</script>

Проблема заключается в том, что while

form.checkValidity();

проверяет правильность формы (возвращает false, если она недействительна), она не вызывает отображение пользовательского интерфейса.

И теперь у нас есть наш вопрос. Передача через

• <input type="submit"> работает (останавливается и отображается UI)
• <button type="submit> работает (останавливается и отображается UI)
• form.submit не работает (не останавливается; не отображается UI)
• form.checkValidity() не работает (не отображается UI)

Как программно отображать пузырьки ошибок проверки на стороне клиента HTML5?

jsFiddle для всех вышеперечисленных

См. также

• Как программно отображать ошибки проверки HTML5 на стороне клиента?
• Запускать стандартную проверку HTML5 (форму) без кнопки отправки?
• Запуск проверки формы HTML5

Ответы

.fakeButton{
    display:none;
}

function DoFakeButtonClick()
{
    var button = $('#fakeButton');
    if (button === null) 
       return;

    button.click();
}