Как программно отображать пузырьки ошибки проверки на стороне клиента 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 для всех вышеперечисленных

См. также

Ответ 1

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

Ответ 2

Я обновил jsfiddle следующим образом:

Добавьте новую кнопку отправки #fakeButton с классом css:

.fakeButton{
    display:none;
}

Добавьте новую ссылку, запускающую ее через функцию javascript:

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

    button.click();
}

Это работает очень хорошо, я думаю, что в настоящее время это единственный способ сделать это программно