Css проверка заполнения поля

Detect if an input has text in it using CSS — on a page I am visiting and do not control?

Is there a way to detect whether or not an input has text in it via CSS? I’ve tried using the :empty pseudo-class, and I’ve tried using [value=»»] , neither of which worked. I can’t seem to find a single solution to this. I imagine this must be possible, considering we have pseudo-classes for :checked , and :indeterminate , both of which are kind of similar thing. Please note: I’m doing this for a «Stylish» style, which can’t utilize JavaScript. Also note, that Stylish is used, client-side, on pages that the user does not control.

I’m not sure of a way to do it with CSS (which doesn’t update on the fly, anyway). This is easy with JavaScript, though.

I don’t think I can use JavaScript. I’m working on a «stylish» style. Pretty sure it has to be done entirely with CSS. If it wouldn’t update as the user enters text, I guess this is kind of a waste of time then. Didn’t think about that. Hmm. At least this isn’t critical for the style, it’s just a nicety I was hoping to add.

18 Answers 18

You can use the :placeholder-shown pseudo class. Technically a placeholder is required, but you can use a space instead.

input:not(:placeholder-shown) < border-color: green; >input:placeholder-shown

This is not supported at all by IE or Firefox unfortunately. Source: caniuse.com/#feat=css-placeholder-shown

Awesome answer. Browser support sucks, but if a polyfill comes out for :placeholder-shown then this should become the accepted answer. The required method doesn’t take into account fringe cases. It should be noted that you can pass a space to a placeholder and this method will still work. Kudos.

The other downside to this is you seem to need to actually have a placeholder. In other words, input:not(:placeholder-shown) will always match even if there is no value.

@redbmk as corysimmons mentioned, It should be noted that you can pass a space to a placeholder and this method will still work.

It is possible, with the usual CSS caveats and if the HTML code can be modified. If you add the required attribute to the element, then the element will match :invalid or :valid according to whether the value of the control is empty or not. If the element has no value attribute (or it has value=»» ), the value of the control is initially empty and becomes nonempty when any character (even a space) is entered.

The pseudo-classed :valid and :invalid are defined in Working Draft level CSS documents only, but support is rather widespread in browsers, except that in IE, it came with IE 10.

If you would like to make “empty” include values that consist of spaces only, you can add the attribute pattern=.*\S.* .

There is (currently) no CSS selector for detecting directly whether an input control has a nonempty value, so we need to do it indirectly, as described above.

Generally, CSS selectors refer to markup or, in some cases, to element properties as set with scripting (client-side JavaScript), rather than user actions. For example, :empty matches element with empty content in markup; all input elements are unavoidably empty in this sense. The selector [value=»»] tests whether the element has the value attribute in markup and has the empty string as its value. And :checked and :indeterminate are similar things. They are not affected by actual user input.

Источник

Проверка ввода данных

Рассмотрим пример проверки правильности ввода данных через HTML, с подсветкой CSS, а затем дополнительно сделаем валидацию с помощью JavaScript.

Валидация данных необходима. Пользователь может случайно или специально ввести не корректные символы, что в дальнейшем приведёт к фатальной ошибке или к не желательным результатам.

Пример: для программ типа калькулятора нужно вводить числа, чтобы производить с ними различные вычисления и нужна проверка (валидация) на то, что пользователь ввёл числа, а не буквы или символы.

Для ввода данных служит элемент input, у него и будем проверять валидацию.

Валидация input через HTML происходит с помощью атрибута pattern.

Примеры атрибута «pattern»

Только русские слова

type=»text»
title=»Разрешено использовать только пробелы и русские буквы»
pattern=»^[А-Яа-яЁё\s]+$»
/>

Только латинские слова

type=»text»
title=»Разрешено использовать только пробелы и латинские буквы»
pattern=»^[a-zA-Z\s]+$»>

Только русские или латинские слова с пробелами, не менее 6 символов

type=»text»
title=»Разрешено использовать только пробелы и русские или латинские буквы, не менее 6″
pattern=»^[A-Za-zА-Яа-яЁё\s]»>

Введите телефон в формате: +7 (777) 777-77-77 (Россия)

type=»tel»
title=»Используйте формат: +7 (777) 777-77-77″
pattern=»[+]7\s[\(]\d[\)]\s\d[\-]\d[\-]\d»>

Атрибут required делает заполнение поля обязательным.

Атрибуты minlength, maxlength задаёт минимальное и (или) максимальное допустимое количество символов. Например minlength=»6″.

Пример валидации на HTML

Использование CSS при валидации

/* Верный ввод */
input:valid border-color: green;
color: green;
box-shadow: none;
>
/* Не верный ввод */
input:invalid border-color: red;
color: red;
box-shadow: none;
>
/* Верный ввод при фокусе */
input:focus:valid border-color: green;
color: green;
box-shadow: none;
>
/* Не верный ввод при фокусе */
input:focus:invalid border-color: red;
color: red;
box-shadow: none;
>
/* Верный ввод при фокусе обязательного input */
input:focus:required:valid border-color: green;
color: green;
box-shadow: none;
>
/* Не верный ввод при фокусе обязательного input */
input:focus:required:invalid border-color: red;
color: red;
box-shadow: none;
>

Введите число ОТ 10 ДО 999

Введите что нибудь и щёлкните вне элемента INPUT.

Элемент подсвечивается красным если он пустой или ввод не валидный, в нашем случае в атрибуте pattern задан ввод только чисел, любой символ или буква будет подсвечивать красным, сообщая об ошибке.

Пустое поле подсвечивает красным цветом атрибут required который сигнализирует что поле обязательно для заполнения.

Атрибуты minlength=»2″ maxlength=»3″ следят за тем, чтобы было введено от двух до трёх символов. Один символ, подсветка останется красной. Больше трёх символов ввести не удаться.

При правильном вводе, красная подсветка исчезнет, а введённые числа станут зелёными.

Пример валидации на JavaScript

Проверка заполнения формы

JavaScript

function validateForm() var x = document.forms[«myForm»][«fname»].value;
if (x == «») alert(«Необходимо ввести имя»);
return false;
>
>

html

Пример

Проверка ввода чисел

JavaScript

function myFunction() var x;
var text = «Все в порядке»;

if (isNaN(x) || x 10) text = «Ввод не верен»;
>
document.getElementById(«demo»).innerHTML = text;
>

html

Пример

Необычный способ проверки валидности email.

JavaScript

function myFunction() const email = document.getElementById(«mail»);

email.addEventListener(«input», function (event) if (email.validity.typeMismatch) email.setCustomValidity(«Введите корректный email»);
> else email.setCustomValidity(«»);
>
>);

html

Пример

Остальные проверки валидации на JS

var regex = /^[a-zA-Z\s]+$/;
if(regex.test(name) === false) printError(«nameErr», «Пожалуйста, введите правильное имя»);

var regex = /^3\d$/;
if(regex.test(mobile) === false) printError(«mobileErr», «Пожалуйста, введите действительный 10-значный номер мобильного телефона»);
>

Источник