Javascript обязательное заполнение поля

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

Рассмотрим пример проверки правильности ввода данных через 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 = /^6\d$/;
if(regex.test(mobile) === false) printError(«mobileErr», «Пожалуйста, введите действительный 10-значный номер мобильного телефона»);
>

Источник

JavaScript валидация форм

При помощи JavaScript можно проводить валидацию (проверку данных) форм HTML.

Например, в следующем примере если поле формы (fname) пусто, то функция выводит сообщение с предупреждением и возвращает значение false, чтобы предотвратить отправку данных формы:

Функцию можно вызывать при возникновении события отправки данных формы:

JavaScript может проверять ввод чисел

Часто JavaScript используется для проверки введенных чисел. Попробуйте сами:

Автоматическая проверка HTML форм

Проверка HTML форм также может проводиться браузером автоматически.

В следующем примере, если поле формы (fname) пусто, атрибут required запрещает отправку данных формы:

Внимание! Автоматическая проверка HTML форм не работает в Internet Explorer 9 и более ранних его версиях.

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

Проверка данных проводится для того, чтобы гарантировать, что пользователь ввел корректные, полезные данные без ошибок.

Типичная проверка состоит в поиске ответов на следующие вопросы:

• Заполнил ли пользователь все необходимые поля?
• Корректны ли введенные данные?
• Не ввел ли пользователь текст в поля для цифр?

Таким образом, цель проверки данных заключается в обеспечении корректного пользовательского ввода.

Проверка может осуществляться разными способами и реализовываться разными путями.

Проверка на стороне сервера осуществляется веб-сервером после получения им введенных данных.

Проверка на стороне клиента осуществляется браузером до отсылки введенных данных на сервер.

Ограничивающая проверка HTML

В HTML5 была добавлена новая концепция HTML проверки, название которой можно было бы перевести как «ограничивающая проверка» (англ. Constraint Validation).

Ограничивающая проверка HTML основывается на:

Атрибуты ограничивающей проверки элемента ввода

Атрибут	Описание
disabled	Определяет, что элемент ввода отключен
max	Определяет максимальное значение в элементе ввода
min	Определяет минимальное значение в элементе ввода
pattern	Определяет шаблон значений в элементе ввода
required	Определяет, что элемент ввода обязателен для заполнения
type	Определяет тип элемента ввода

Полный список атрибутов см. в справке по HTML тегу .

CSS псевдоселекторы ограничивающей проверки

Селектор	Описание
:disabled	Выбирает элемент ввода с атрибутом «disabled»
:invalid	Выбирает элемент ввода с некорректным значением
:optional	Выбирает элемент ввода без атрибута «required»
:required	Выбирает элемент ввода с атрибутом «required»
:valid	Выбирает элемент ввода с корректным значением

О том, что такое псевдоклассы см. раздел CSS псевдоклассы.

Методы DOM ограничивающей проверки

Метод	Описание
checkValidity()	Возвращает true, если элемент ввода содержит корректные данные
setCustomValidity()	Устанавливает свойство validationMessage для элемента ввода

Пример
Если поле ввода содержит некорректные данные, вывести сообщение:

Свойства DOM ограничивающей проверки

Свойство	Описание
validity	Содержит набор свойств типа boolean, определяющих состояние валидности (правильности) элемента ввода
validationMessage	Содержит сообщение, которое выведет браузер в случае неудачной проверки
willValidate	Указывает, будет ли элемент ввода проверяться

Свойства валидности

Свойство validity элемента ввода содержит некий набор свойств, определяющих состояние валидности данных:

Свойство	Описание
customError	Установлено в true, если задано пользовательское сообщение о валидности.
patternMismatch	Установлено в true, если значение элемента не соответствует шаблону в атрибуте pattern.
rangeOverflow	Установлено в true, если значение элемента больше значения в атрибуте max.
rangeUnderflow	Установлено в true, если значение элемента меньше значения в атрибуте min.
stepMismatch	Установлено в true, если значение элемента неверно по атрибуту step.
tooLong	Установлено в true, если значение элемента превышает значение атрибута maxLength.
typeMismatch	Установлено в true, если значение элемента неверно по атрибуту type.
valueMissing	Установлено в true, если у элемента (с атрибутом required) нет значения.
valid	Установлено в true, если значение элемента валидно.

Пример №1. Свойство rangeOverflow.

Если число в поле ввода больше 100 (атрибут max элемента ), то вывести сообщение:

  OK  

Пример №2. Свойство rangeUnderflow.

Если число в поле ввода меньше 100 (атрибут min элемента ), то вывести сообщение:

  OK  

Источник