:invalid лишь после попытки отправить форму?

Question

[DeniSidorenko]

Недавно узнал о такой крутом псевдо классе для input как :invalid. И если к примеру поля required или тип не совпадает он может окрасить их в другой цвет( к примеру красный как у меня)

Проблема лишь в том что если я задаю input:invalid{border: 1px solid red;} , он изначально имеет красный цвет. ДА это логично ведь он required и поля пока не заполнены. Но возможно ли сделать так что бы лишь при попытке отправить ( неудачной) загоралось эта функция. Я думаю отловить события и при неудачной попытке лишь добавить класс. Но может есть более легкий способ

Comments

[WapSter]

Нет нету. Используй для этого js.

Answer 1

[Арсений Матыцин]

отловить события и при неудачной попытке лишь добавить класс

Вопрос в ответе, лучше пока не придумали.

Answer 2

[DeniSidorenko]

Сделал простое решение. Форма отправляется ajax'ом. Сделал что бы при клике на кнопку добавлялся класс который и включает эти красные поля. А при удачной отправке удалить класс формы

Answer 3

[zkrvndm]

Просто используйте input:focus:invalid и будут загоратся только поля в фокусе.

Comments

[WapSter]

Пустое поле сразу же будет красным. Тоже не хорошо

[zkrvndm]

WapSter, если это принципиально, то можно разместить input type="submit" в начале формы и использовать селекторы соседей:

input[type="submit]:focus ~ input:invalid {
    border: 1px solid red;
}

Ошибки будут подсвечены только при клике на кнопку отправки формы. Само с собой, кнопку отправки надо будет отпозиционировать абсолютно, чтобы потом сместить в конец формы.

[WapSter]

Надим Закиров, вариант)

[DeniSidorenko]

Надим Закиров, Отличная идея, сейчас попробуем

[Арсений Матыцин]

Надим Закиров, прирасфокусировке поля перестанут быть подсвечеными, к гадалке не ходи. И порядок можно задавать order-ом в flex-ах, так дешевле.

[zkrvndm]

Арсений Матыцин, это тоже не проблема, если мы говорим о решении проблемы на чистом CSS, без привлечения JavaScript вообще, то вопрос можно решить так. Дополнительно к вышеописанному способу, внутри формы создаем невидимую ссылку:

<a style="display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#form_id"></a>

С помощью стилей делам нашу накладку активной при получении фокуса кнопкой отправки:

input[type="submit]:focus ~ a {
    display: block !important;
}

Когда посетитель кликнет, на форму, чтобы исправить ошибки, в адрес страницы будет добавлен хеш #form_id и уже опираясь на него мы можем сохранить подсветку невалидных полей:

form:target input:invalid {
    border: 1px solid red;
}

Ну а накладка снова станет неактивной из-за потери фокуса кнопкой отправки.