Запуск проверки формы HTML5

это на самом деле и можно запустить проверку вручную. (Вопрос действительно старый, но он появляется поверх Google, прецедент все еще действителен, и пока нет отличного ответа.)

Я буду использовать простой JavaScript в своем ответе, чтобы улучшить повторное использование, не требуется jQuery.

---

предположим, что следующая HTML-форма:

<form>
  <input required>
  <button type="button">Trigger validation</button>
</form>

и давайте захватим наши элементы пользовательского интерфейса в JavaScript:

var form = document.querySelector('form')
var triggerButton = document.querySelector('button')

---

обновление Сентября 2018 года

С выпуском Microsoft Edge 17 в апреле 2018 года все современные браузеры поддержка относительно новый reportValidity() метод on form элементы.

так что если мы явно не таргетинг Internet Explorer или некоторых старых телефонов BlackBerry, наша самая простая ставка на сегодняшний день это:

triggerButton.onclick = function () {
    form.reportValidity()
}

вот и все, мы закончили. Кроме того,вот простой CodePen С помощью этого подход.

если нам нужна поддержка старых браузеров, однако, мы должны использовать оригинальное решение, описанное ниже.

---

так что же мы будем делать?

1. проверьте правильность формы, позвонив form.checkValidity(). Это скажет нам, если форма действительна, но не показывает пользовательский интерфейс проверки.
2. если форма недействительна, мы создаем временную кнопку отправки и нажимаем на нее. Так как форма не действительна, мы знаю он не будет на самом деле submit, однако, он будет показывать подсказки проверки для пользователя. Мы немедленно удалим временную кнопку отправки, поэтому она никогда не будет видна пользователю.
3. если форма действительна, нам не нужно вмешиваться вообще и позволить пользователю продолжить.

---

в коде:

triggerButton.onclick = function () {
  // Form is invalid!
  if (!form.checkValidity()) {
    // Create the temporary button, click and remove it
    const tmpSubmit = document.createElement('button')
    form.appendChild(tmpSubmit)
    tmpSubmit.click()
    form.removeChild(tmpSubmit)

  } else {
    // Form is valid, let the user proceed or do whatever we need to
  }
}

этот код будет работать практически в любом обычном браузере (я успешно протестировал его до IE11).

вот рабочий Пример CodePen.

---

Я предполагаю, что проблема OP больше не существует после стольких лет, но для всех, имеющих один и тот же случай использования (многостраничная форма): обязательно каким-то образом отключите элементы в скрытых в настоящее время частях формы, так как проверка невидимых полей приведет к ошибке браузера.

в какой-то степени, вы можете trigger проверка формы HTML5 и показывать подсказки пользователю без отправки формы!

две кнопки, одна для проверки, одна для отправки

поставил onclick слушатель на кнопку Проверить, чтобы установить глобальный флаг(скажем justValidate) чтобы указать, что этот щелчок предназначен для проверки проверки формы.

и назначить onclick слушатель на кнопку "Отправить", чтобы установить justValidate флаг в false.

затем в onsubmit обработчик формы, вы проверяете флаг justValidate чтобы решить возвращаемое значение и вызвать preventDefault() чтобы остановить форму для отправки. Как вы знаете, проверка формы HTML5 (и подсказка GUI для пользователя) предварительно сформирована перед onsubmit событие, и даже если форма действительна, вы можете остановить отправку формы, вернув false или invoke preventDefault().

и, в HTML5 у вас есть метод для проверки проверки формы:form.checkValidity(), то в вы можете знать, если форма проверить или нет в вашем код.

хорошо, вот демо: http://jsbin.com/buvuku/2/edit

несколько легко сделать добавление или удаление проверки HTML5 для наборов полей.

 $('form').each(function(){

    // CLEAR OUT ALL THE HTML5 REQUIRED ATTRS
    $(this).find('.required').attr('required', false);

    // ADD THEM BACK TO THE CURRENT FIELDSET
    // I'M JUST USING A CLASS TO IDENTIFY REQUIRED FIELDS
    $(this).find('fieldset.current .required').attr('required', true);

    $(this).submit(function(){

        var current     = $(this).find('fieldset.current')
        var next        = $(current).next()

        // MOVE THE CURRENT MARKER
        $(current).removeClass('current');
        $(next).addClass('current');

        // ADD THE REQUIRED TAGS TO THE NEXT PART
        // NO NEED TO REMOVE THE OLD ONES
        // SINCE THEY SHOULD BE FILLED OUT CORRECTLY
        $(next).find('.required').attr('required', true);

    });

});

Я не уверен, что это стоит для меня, чтобы напечатать все это с нуля, так как эта статья опубликована в списке отдельно делает очень хорошую работу, объясняя это. MDN также имеет удобный руководство для HTML5 форм и проверки (охватывающих API, а также связанные с ними CSS).

Кажется, я нашел трюк: Просто удалите тег "target" формы, затем используйте кнопку отправки для проверки формы и отображения подсказок, проверьте правильность формы с помощью javascript, а затем опубликуйте все, что угодно. Следующий код работает для меня:

<form>
  <input name="foo" required>
  <button id="submit">Submit</button>
</form>

---

<script>
$('#submit').click( function(e){
  var isValid = true;
  $('form input').map(function() {
    isValid &= this.validity['valid'] ;
  }) ;
  if (isValid) {
    console.log('valid!');
    // post something..
  } else
    console.log('not valid!');
});
</script>

другой способ решить эту проблему:

$('input').oninvalid(function (event, errorMessage) {
    event.target.focus();
});

когда существует очень сложный (особенно асинхронный) процесс проверки, существует простой обходной путь:

<form id="form1">
<input type="button" onclick="javascript:submitIfVeryComplexValidationIsOk()" />
<input type="submit" id="form1_submit_hidden" style="display:none" />
</form>
...
<script>
function submitIfVeryComplexValidationIsOk() {
    var form1 = document.forms['form1']
    if (!form1.checkValidity()) {
        $("#form1_submit_hidden").click()
        return
    }

    if (checkForVeryComplexValidation() === 'Ok') {
         form1.submit()
    } else {
         alert('form is invalid')
    }
}
</script>