Вручную вызвать проверку формы HTML5

Question

У меня есть устаревшая форма, которую я пытаюсь обновить, чтобы выполнить простую проверку формы HTML5.

В настоящее время он использует reCaptcha и вызывает функцию verify(), которая проверяет вызов reCaptcha перед пересылкой содержимого формы. Я хотел бы убедиться, что форма проходит проверку HTML5, прежде чем продолжить обработку reCaptcha, и отображать соответствующие сообщения об ошибках, которые браузер будет использовать по умолчанию.

Элемент iframe, содержащий форму в виде типа документа . Поля ввода имеют required приписывать.

Кнопка отправки имеет следующее:

<input type="button" id="script_send" onclick="javascript:verify(this.form);" value="ENVIAR">

Скрипт проверки имеет базовую структуру.

function verify(theForm) {
    form = theForm;

    /* Recaptcha processing */
}

Я пытался с помощью

if (!form.checkValidity()) {
    return false;
}

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

Я видел этот jsfiddle [http://jsfiddle.net/5ycZz/], используемый для демонстрации функции checkValidity(), но даже он не отображает визуальные подсказки ошибок, которые я ожидаю увидеть в Chrome, IE10 или FF.

Answer 1

Попробуйте установить событие отправки в форме вместо того, чтобы нажимать на кнопку "Отправить". submit Событие запускается ПОСЛЕ проверки, поэтому оно должно происходить только в том случае, если все остальные ограничения пройдены. Это также означает, что вам не нужно звонить form.checkValidity() в вашем verify функция.

<form onsubmit="verify(this)">
...
</form>

Answer 2

Это решение проблемы:

if (!form.checkValidity()) {
    form.reportValidity();
    return false;
}