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

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

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

JavaScript


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

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

HTML


<form name="myForm" action="//msiter.ru/action_page.php" onsubmit="return validateForm()" method="post">
 Имя: <input type="text" name="fname">
<input type="submit" value="Submit">
</form> 

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

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

Введите число от 1 до 10

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

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

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


<form action="//msiter.ru/action_page.php" method="post">
   <input type="text" name="fname" required>
   <input type="submit" value="Submit">
</form>

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

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

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

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

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

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

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

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

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

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

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

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

  • HTML атрибутах элемента ввода,
  • CSS псевдоселекторах,
  • свойствах и методах DOM

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

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

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

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

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

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

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

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

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


<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
 function myFunction() {
    var inpObj = document.getElementById("id1");
    if (!inpObj.checkValidity()) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    }
}
</script>

Свойства 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 элемента <input>), то вывести сообщение:


<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>

 <p id="demo"></p>

 <script>
 function myFunction() {
    var txt = "";
     if (document.getElementById("id1").validity.rangeOverflow) {
        txt = "Значение слишком большое";
     }
    document.getElementById("demo").innerHTML = txt;
 }
 </script>

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

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


<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
function myFunction() {
    var txt = "";
     if (document.getElementById("id1").validity.rangeUnderflow) {
        txt = "Значение слишком маленькое";
     }
    document.getElementById("demo").innerHTML = txt;
 }
</script>