Как отобразить проверку HTML5, если inputElement.validity.valid == false?

Question

Итак, у меня есть форма, но мне пока не нужно отправлять информацию на сервер ... Что мне нужно, это просто запустить поля с помощью встроенных условий проверки HTML5 (таких как электронная почта) и т. д.), и если true, просто выполните определенную функцию ...

Пока я придумал это ...

function checkform()
{
    var /* all the elements in the form here */

    if (inputElement.validity.valid == 'false')
    {
        /* Submit the form, 
        this will cause a validation error, 
        and HTML5 will save the day... */
    } else
    {
        navigateNextStep();
    }
}

Это логика, которую я придумала до сих пор, и она немного запоздалая, потому что я отправляю ЗНАЮ, что есть недопустимое значение, и, следовательно, вызывает запросы проверки ...

Моя единственная проблема с вышеуказанной логикой, это то, что у меня есть около 7-8 входных элементов, и я нахожу вариант делать следующее, скорее, «грязно»:

var inputs = document.getElementsByTagName("INPUT");
if (!inputs[0].validity.valid && !inputs[1].validity.valid && ...)

Идеи

Answer 1

Вы можете просто позвонить formEl.checkValidity() ... Это вернет логическое значение, указывающее, действительна ли вся форма, и выдаст соответствующие invalid события в противном случае.

Спецификация

Краткое JSFiddle для игры с

Я не уверен, как вы ожидаете отправки формы для запуска пользовательского интерфейса проверки браузера. Вызов formEl.submit(), кажется, приводит к отправке независимо от состояния проверки. Это отмечено внизу Страница проекта H5F , на которой написано:

Safari 5, Chrome 4-6 и Opera 9.6+ отправляют все блочные формы до тех пор, пока все проверки формы не будут проверены ограничения выполнены.

Opera 9.6+ после отправки формы будет фокусироваться на первом недействительном поле и вызвать блок пользовательского интерфейса, указывающий что это недействительно.

Safari 5.0.1 и Chrome 7 убрали блокировку отправки формы, если форма недействительна, скорее всего из-за устаревшие формы теперь не отправляются на старые сайты.

Answer 2

Хорошо, так что это неловко ... Благодаря Domenic и доброму старому Google, я нашел альтернативное решение ...

Я запустил цикл for, проверяя, все ли элементы вводабыли действительными или нет с помощью метода imputElement.validity.valid, который возвращал логическое значение ...

Для каждого действительного элемента я увеличивал переменную на 1 и включал условный оператор в цикл дляпроверить, была ли переменная увеличена достаточно для выполнения функции навигации ...

Если бы было недопустимое поле, оператор if никогда не был бы выполнен, и (вот забавная часть) браузер все равно проверил бы поля, всплывающее окно с сообщением о том, какие поля были разбиты и нуждалась в пользовательской коррекции ...: -)

Цикл For ...

for (i=0;i<8;i++)
{
    if (inputs[i].validity.valid)
        hg++;
}

if (hg==8)
    skimregform();

Answer 3

Вы можете программно запустить проверку каждого поля в вашей форме, даже если вы установили функцию event.preventDefault ().

  document.forms["form_id_name"].reportValidity();