Валидация форм

Последнее обновление: 08.04.2016

Итак, в нашем распоряжении имеются различные элементы, которые мы можем использовать на форме. Мы можем вводить в них различные значения. Однако нередко пользователи вводят не совсем корректные значения: например, ожидается ввод чисел, а пользователь вводит буквы и т.д. И для предупреждения и проверки некорректного ввода в HTML5 существует механизм валидации.

Преимущество использования валидации в HTML5 заключается в том, что пользователь после некорректного ввода может сразу получить сообщение об ошибке и внести соответствующие изменения в введенные данные.

Для создания валидации у элементов форм HTML5 используется ряд атрибутов:

  • required: требует обязательного ввода значения. Для элементов textarea, select, input (с типом text, password, checkbox, radio, file, datetime-local, date, month, time, week, number, email, url, search, tel)

  • min и max: минимально и максимально допустимые значения. Для элемента input с типом datetime-local, date, month, time, week, number, range

  • pattern: задает шаблон, которому должны соответствовать вводимые данные. Для элемента input с типом text, password, email, url, search, tel

Атрибут required

Атрибут required требует обязательного наличия значения:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Валидация в HTML5</title>
	</head>
	<body>
		<form method="get">
			<p>
				<label for="login">Логин:</label>
				<input type="text" required id="login" name="login" />
			</p>
			<p>
				<label for="password">Пароль:</label>
				<input type="password" required id="password" name="password" />
			</p>
			<p>
				<input type="submit" value="Отправить" />
			</p>
		</form>
	</body>
</html>

Если мы не введем в эти поля никаких данных, оставив их пустыми, и нажмем на кнопку отправки, то браузер высветит нам сообщения об ошибке, а данные не будут отправлены на сервер:

Атрибут required в HTML5

В зависимости от браузера визуализация сообщения может несколько отличаться. Также границы некорректного поля ввода могут окрашиваться в красный цвет. Например, поведение при отправке пустых сообщений в Firefox:

Валидация HTML5 в Firefox

Атрибуты max и min

Для ограничения диапазона вводимых значений применяются атрибуты max и min:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Валидация в HTML5</title>
	</head>
	<body>
		<form method="get">
			<p>
				<label for="age">Возраст:</label>
				<input type="number" min="1" max="100" value="18" id="age" name="age"/>
			</p>
			<p>
				<input type="submit" value="Отправить" />
			</p>
		</form>
	</body>
</html>
Ограничение диапазона чисел в HTML5

Атрибут pattern

Атрибут pattern задает шаблон, которому должны соответствовать данные. Для определения шаблона используется язык так называемых регулярных выражений. Рассмотрим самые простейшие примеры:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Валидация в HTML5</title>
	</head>
	<body>
		<form method="get">
			<p>
				<label for="phone">Телефон:</label>
				<input type="text" placeholder="+1-234-567-8901" 
						pattern="\+\d-\d{3}-\d{3}-\d{4}" id="phone" name="phone" />
			</p>
			<p>
				<input type="submit" value="Отправить" />
			</p>
		</form>
	</body>
</html>

Здесь для ввода номера телефона используется регулярное выражение \+\d-\d{3}-\d{3}-\d{4}. Оно означает, что первым элементом в номере должен идти знак плюс +. Выражение \d представляет любую цифру от 0 до 9. Выражение \d{3} означает три подряд идущих цифры, а \d{4} - четыре цифры подряд. То есть это выражение будет соответствовать номеру телефона в формате "+1-234-567-8901".

Если мы введем данные, которые не соответствуют этому шаблону, и нажмем на отправку, то браузер отобразит ошибку:

Регулярные выражения в HTML5

Отключение валидации

Не всегда валидация является желаемой, иногда требуется ее отключить. И в этом случае мы можем использовать либо у элемента формы атрибут novalidate, либо у кнопки отправки атрибут formnovalidate:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Валидация в HTML5</title>
	</head>
	<body>
		<form novalidate method="get">
			<p>
				<label for="phone">Телефон:</label>
				<input type="text" placeholder="+1-234-567-8901" 
						pattern="\+\d-\d{3}-\d{3}-\d{4}" id="phone" name="phone" />
			</p>
			<p>
				<input type="submit" value="Отправить" formnovalidate />
			</p>
		</form>
	</body>
</html>

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850