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>