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 используется для проверки введенных чисел. Попробуйте сами:

Автоматическая проверка 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

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

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

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

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

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

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

<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 элемента ввода содержит некий набор свойств, определяющих состояние валидности данных:

Пример №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>