CheckValidity для обновления пользовательского интерфейса

Когда мы пытаемся отправить форму HTML5, она предотвращает отправку формы, если одно или несколько обязательных полей не имеют значения или какая-либо другая ошибка (несоответствие типа или длины). Пользовательский интерфейс обновляется с выделенными недопустимыми полями, а первое недопустимое поле сфокусировано. Кроме того, есть воздушный шар/пузырь, прикрепленный к первому недопустимому полю с сообщением об ошибке.

Теперь, если это форма Ajax, мы вызываем myForm.checkValidity(), чтобы подтвердить ошибки перед отправкой вызова Ajax. Но при вызове checkValidity() он не влияет на пользовательский интерфейс с недопустимыми полями, выделенными и с прикрепленным пузырьком.

Есть ли способ вызвать собственное поведение браузера для проверки, чтобы мы могли видеть воздушный шар вместе с недопустимыми полями, выделенными и сфокусированными?

Ответ 1

Просто вызвать фактическое представление формы - http://jsfiddle.net/tj_vantoll/ZN29S/.

Действительная подача формы будет выполняться checkValidity, покажет ошибки пузыря, вызовет обработчики событий invalid при необходимости и т.д.

Чтобы убедиться, что форма фактически не отправлена, вам просто нужно прикрепить submit обработчик событий к <form>, который предотвращает действие по умолчанию, а затем выполнить вызов AJAX.

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

Изменить (11/7/12) на комментарии к комментариям.

Посредством реального представления формы в этом случае я просто ссылался на не-AJAX-заявку, выполненную с помощью кнопки отправки. Чтобы получить собственный пузырь для отображения и сосредоточиться на соответствующем элементе формы, это единственный способ сделать это. Если нет кнопки отправки, вы можете сделать скрытую и использовать ее для запуска отправки; он по-прежнему будет работать.

Я бы согласился, что этот подход менее идеален, но он работает в всех поддерживающих браузерах. Единственная причина, по которой этот хак используется, а не вызов form.submit(), заключается в том, что form.submit() не вызывает встроенную проверку. Для меня проблема здесь не в том, что API не запускает проверку, а скорее вызывает вызов form.submit(). Спектр говорит, что проверка ограничений должна выполняться всякий раз, когда "пользовательский агент должен статически проверять ограничения формы элемента формы". Я не знаю, почему вызов form.submit() не применим.

Следует отметить, что checkValidity выполняется через тот же алгоритм в качестве исходной формы. Поэтому вы можете отключить пузырьки по умолчанию и реализовать свои собственные. Например, что-то вроде this.