1

Как сделать так, что бы до отправки формы, стиль :invalid не применялся и цвет оставался черным?

Пример:

input {
  color: black;
}
input:invalid {
  color: red;
}
<input type="text" required="required" placeholder="Как вас зовут?" />

Все атрибуты должны присутствовать,
Есть ли возможность отменить валидацию до отправки формы, или как-то ее "обмануть" ?

7
  • А чем вам это не нравится? При пустом поле текста ведь не видно?
    – korytoff
    2 фев 2016 в 10:06
  • @korytoff проблема в том, что стиль :invalid применяется к required сразу при загрузке страницы, а не после валидации при отправке формы
    – Neka
    2 фев 2016 в 11:17
  • так HTML5 валидация работает ПЕРЕД отправкой формы
    – korytoff
    2 фев 2016 в 11:24
  • @korytoff в том то и проблема, не могу придумать пока решения как это обойти
    – Neka
    2 фев 2016 в 11:28
  • Не надо это обходить. Нужно просто понять что вам нужно и исходя из этого придумать реализацию. См. обновленный ответ
    – korytoff
    2 фев 2016 в 11:30

1 ответ 1

2

Убрать аттрибут required. Стиль :invalid применяется при ошибки валидации, а у вас у поля указан атрибут обязательного заполнения. Вот и красится красным.

UPD

На прямой вопрос – прямой ответ. У вас не правильное понимание работы валидации в HTML5. Вам нужно по другому сформулировать вопрос, так как на текущий момент ошибки нет, работает все правильно.

Проверка полей происходит ДО отправки формы, то есть постоянно. Если вам нужна проверка формы в момент отправки, то используйте событие onsubmit на JS и ставьте свои классы для отображения ошибочных полей, как это делалось всегда.

1
  • есть ли возможно js-ом отменить валидацию при загрузке страницы? т.е. чтобы не подставлять классы, а устранить первопричину
    – Neka
    2 фев 2016 в 13:51

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.