HTML5 обязательный стиль ввода

Question

В HTML 5 мы можем пометить входные данные как required, а затем выбрать их с помощью псевдоселектора [required] в CSS. Но я хочу их стилизовать только тогда, когда они пытаются отправить форму без заполнения обязательного элемента. Есть ли селектор для этого? Как насчет небольшого всплывающего окна с сообщением?

Answer 1

Вы можете использовать: действительные и: недействительные селекторы. Как то так

.field:valid {
    border-color:#0f0;
}
.field:invalid {
    border-color:#f00;
}

Однако это будет работать только в браузерах, которые поддерживают собственную проверку, и только для полей, которые имеют смысл. Насколько я знаю, сейчас это означает только Chrome (возможно, Safari, но еще не проверял).

Таким образом, под собственной проверкой я имею в виду, что в chrome, если вы выполните <input type="email">, значение поля будет проверено для строки типа электронной почты (без какого-либо дополнительного javascript), поэтому приведенные выше стили будут работать. Однако, если бы вы прикрепили их к полю type="text" или второму полю пароля (то есть предположим, что оно совпадает с первым), вы бы получили зеленый цвет только потому, что все верно, а в случае пароля есть во всяком случае, нет «типа» для этого.

Что в основном означает, что для поддержки всех браузеров и, что более важно, более широкого массива проверок вам все равно придется прибегнуть к javascript, и в этом случае назначение класса .valid / .invalid не должно быть проблемой. :)

Answer 2

Я прибегнул к использованию js, чтобы применить класс .validated к форме при отправке, а затем использовать этот класс для стиля: недопустимые fields.eg:

.validated input:invalid { ... }

Таким образом, поля не отображаются как недействительные при загрузке страницы, только после отправки формы. В идеале к форме применительно должен быть применен псевдо-класс.

Answer 3

Да, как сказал SLaks, CSS-селектора для этого нет. Я сомневаюсь, что это когда-либо будет в рамках CSS, потому что CSS должен будет проверять содержимое ввода.

Ваш лучший вариант, тем не менее, вероятно, заключается в том, чтобы при нажатии кнопки вызывать функцию проверки JavaScript, а не отправлять форму. Затем проверьте [обязательные] поля для соответствующего содержимого и отправьте форму или выделите обязательные поля, которые не были заполнены.

JQuery имеет несколько хороших плагинов, которые позаботятся об этом для вас http://docs.jquery.com/Plugins/validation

Answer 4

input:required {
    /* Style your required field */
    /* Be sure to style it as an individual field rather than just add your desired styles
    for a required field. */
}

Испытано и проверено в хром. Я не проверял его ни в каком другом браузере.

Answer 5

В рабочем наброске CSS Selector 4 есть псевдокласс :user-error, который сделает именно это, запустив как размытие ввода, так и отправку формы.

А покаЯ лично использую удивительную библиотеку webshims polyfill , которая покрывает: пользовательскую ошибку, или вы можете сами ее взломать чем-то вроде ответа Тоби.

Answer 6

Это решение будет стилизовать поля ввода, которые требуются через атрибут , а пусто.Браузеры удаляют псевдокласс: invalid при заполнении обязательного поля при нажатии клавиши.Последние версии Firefox автоматически применяют что-то похожее на этот стиль, но Chrome и IE этого не делают.

input[required]:invalid { box-shadow: 0 0 3px 1px red }

Попробуйте: http://jsfiddle.net/2Ph2X/

Answer 7

Очень просто, просто добавьте класс, когда элемент находится в фокусе, затем во время отправки он фокусируется на неверных элементах, а клиент заполняет и проверяет один за другим. Я считаю, что это лучшее решение без использования JavaScript..

input:required:focus {
   border-color: palegreen;
}
input:invalid:focus {
   border-color: salmon;
}