Пример из жизни: валидация формы при помощи JS онлайн урок.


Попробуем применить полученные знания на практике. Для этого создадим JS скрипт, который проверит, все ли поля формы были заполнены перед отправкой.

Для этого нам понадобится:

  1. index.html - с макетом формы
  2. scripts.js - со скриптами JS

В качестве наполнения index.htmlвозьмем форму и стили из уроков по CSS.

В файле scripts.js реализуем функцию, которая будет валидировать форму. Эта функция будет принимать переменную с объектом формы:

function validate(form) {
// code here
}


Внутри функции, используя методы поиска объектов DOM, получаем коллекцию объектов inputи textarea. Вводим специальную переменную validated, значение которой будет возвращено функцией.

var text_fields = form.getElementsByTagName('input');
var textarea = document.getElementById('form_about');
var validated = true;


Перебираем коллекцию объектов inputза исключением кнопки отправки формы и каждый раз обновляем значение переменной validated, пересекая его с условием "непустоты" значения свойства valueкаждого объекта коллекции text_fields. В результате, если хотя бы одно поле пустое - получим в переменной validatedзначение false. Иначе - она сохранит свое значение.

for (var i = 0; i < text_fields.length; i++) {
    if (text_fields[i].type != 'submit') {
        validated = validated && (text_fields[i].value !== '');
    }
}


То же самое для textarea:

validated = validated && (textarea.value !== '');


И в конце, если значение validatedизменилось на false, выводим сообщение и возвращаем значение validated

if (!validated) {
    alert('Fill the fields');
}
return validated;


Таким образом получили функцию, которую помещаем в файл js/scripts.js



Вернемся в файл index.html. Добавим в форму обработку события onsubmit, а в headдобавим подключение файла со скриптами scripts.js

В результате, если хотя бы одно поле формы осталось пустым, то форма не будет отправлена, но будет сообщение о просьбе заполнить поля.