Проверка формы HTML 5 с использованием checkValidity не показывает по умолчанию красно-оранжевую рамку

Question

Используя проверку формы html 5, я хотел бы проверить мои формы, которые мы получаем с помощью ajax.

Когда я проверяю свою форму (используя .checkValidity()), недопустимая красная / оранжевая граница по умолчанию с помощью firefox / chromeне показывать.

Когда я нажимаю input[type="submit"], он показывает эту красную рамку.

См. этот пример jsfiddle:

http://jsfiddle.net/jyaHZ/

Answer 1

Поправьте меня, если я ошибаюсь, но я все же думаю, что вам все равно придется делать CSS-стилизацию самостоятельно. Все, что HTML5 добавляет здесь, это псевдокласс :invalid и :valid, который вы можете использовать как this .

Подробнее о проверке формы HTML5 на MDN

EDIT

Очевидно, я могу исправить себя, так как здесь говорится здесь , что:

По умолчанию Gecko применяет стиль, который создает красное свечение (используя свойство box-shadow) вокруг элементов с этим псевдоклассом применяется. Смотрите псевдокласс: invalid для примера, который показывает, как переопределить стиль по умолчанию.

Хотя я - тоже - не вижу такого поведения в Firefox (ни в Chrome)