Переопределить проверку HTML5

Question

Я работаю над простой формой входа в систему, с двумя полями:

<form>
  <input type="email" name="email" required />
  <input type="password" name="password" required />
  <button type="submit">Log in</button>
</form>

В современных браузерах проверка запускается автоматически.

Однако, если javascript доступен, я хочу взять проверку формы html5 и обработать все сам.

Я хочу автоматически проверить «onblur» (только уязвимое поле) и хочу проверить все поля при нажатии «submit».

Однако события onblur работают нормально. При нажатии кнопки «submit» стандартное событие submit не вызывается. Тем не менее, «недопустимое» событие инициируется; но только для первого недействительного события.

Какой хороший способ сказать браузеру игнорировать все проверки, связанные с HTML5, и взять на себя весь процесс?

Answer 1

Обращаем ваше внимание на то, что - хотя некоторые браузеры могут поддерживать атрибут novalidate для INPUT элементов - HTML-код не проверяется.

Согласно документации тамнет такого атрибута.Только элемент FORM может содержать атрибут novalidate .

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
• http://www.w3.org/TR/html5/forms.html#the-form-element
• http://www.w3.org/TR/html5/forms.html#the-input-element

Answer 2

Этот ответ неверный.Пожалуйста, смотрите ответ willydee.

Просто, просто добавьте свойство novalidate к любому элементу, который не требуется проверять браузером, например:

<form>
  <input type="email" name="email" required novalidate />
  <input type="password" name="password" required />
  <button type="submit">Log in</button>
</form>

хотите отменить проверку только при наличии JavaScript, добавьте его с помощью JavaScript (используя jQuery для упрощенного примера)

$('input[novalidate]').attr('novalidate', 'novalidate');

Answer 3

Другой вариант, если вы, например, используете jQuery, - удалить атрибут.

$("input[required],select[required],textarea[required]").removeAttr('required');

Answer 4

Может быть, вы можете использовать javascript для преобразования всех «обязательных» атрибутов в «data-required», чтобы вы могли обрабатывать их с помощью javascript и переопределить проверку формы html5 с помощью собственного обработчика