Отправьте HTML5-форму с помощью Javascript и подтвердите свои входы

Я пишу форму и добавляю атрибуты проверки html5 к ее вводу, например, "требуется", "автофокусировка". Я использую Javascript для отправки формы с помощью document.myForm.submit(), но не проверяет форму против атрибутов проверки html5, поскольку их нет.

Любые предложения?

Ответы

Ответ 1

Похоже, что запуск кнопки click на кнопке отправки имеет правильный эффект: http://jsfiddle.net/e6Hf7/.

document.myForm.submitButton.click();

и если у вас нет кнопки отправки, добавьте невидимое, например:

<input type="submit" style="display:none" name="submitButton">

Ответ 2

Ответ pimvdb основан на обходном пути для включения скрытой кнопки отправки.

HTML5 предоставляет функции javascript для достижения одного и того же без кнопки отправки. Как отметил Тигрин, Mozilla документирует два метода проверки достоверности для элементов формы:

  • checkValidity() возвращает true/false и ничего не сообщает конечному пользователю
  • reportValidity() возвращает true/false и ALSO отображает сообщения о проверке для конечного пользователя (например, обычный щелчок кнопки отправки)

<!DOCTYPE html>
<html>
<body>

<form name="testform" action="action_page.php">
E-mail: <input type="email" name="email" required><br/>
<a href="#" onclick="javascript:console.log(document.testform.reportValidity());return false;">Report validity</a><br/>
<a href="#" onclick="javascript:console.log(document.testform.checkValidity());return false;">Check validity</a><br/>
<a href="#" onclick="javascript:if(document.testform.reportValidity()){document.testform.submit();}return false;">Submit</a>
</form>

</body>
</html>

Ответ 3

Почему бы просто не просто выполнить проверку вручную до того, как вы выполните document.myForm.submit()

Какую структуру проверки вы используете и какую библиотеку AJAX?

Если вы используете jQuery, здесь приведен код, чтобы предотвратить отправку:

$('#myForm').submit(function(evt) {
  if (! $('#myForm').validate()) {
    evt.preventDefault();
  }
});

И запустите отправку через:

$('#myForm').submit();

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

Если вы не используете какие-либо рамки JavaScript, вы можете посмотреть: element.checkValidity(); и как вызывать проверку HTML5 из ​​JavaScript, прежде чем даже вызвать submit.