Валидация формы на JS
Валидация формы – это функция, проверяющая вводимую пользователем информацию, при заполнении формы. Если пользователь что-то пропустил или ввел не в правильном формате, то скрипт проверки, ему указывает, что неправильно. Данные формы не отправятся на сервер и скрипт выдаст вам ошибку.
Как сделать валидацию формы?
Валидацию формы можно делать на jQuery (Валидация формы на jQuery), JavaScript, а также на любом серверном языке, например PHP.
Тема данного урока, как сделать валидацию формы на JS, максимально простым способом. Скрипт будет проверять, только одно условие, все ли заполнены поля. У нас уже есть готовая форма (Верстка формы), с ней мы и будем работать.
Добавим к тегу form, атрибут onsubmit со значением return validate(), чтобы предотвратить поведение по умолчанию и выполнять только написанный код.
<form name="myForm" onsubmit="return validate()">
Наша форма содержит шесть текстовых полей, куда будут вводиться данные, с ними мы и будем работать. Добавим каждому полю name со своим значением.
<div class="input_contact">
<input type="text" placeholder="Имя" name="first_name">
<input type="text" placeholder="Фамилия" name="last_name">
<input type="text" placeholder="Е-майл" name="email">
<input type="text" placeholder="Тел." name="tel">
</div>
<div class="input_label">
<label><span>Время</span><input type="text" name="time"></label>
<label><span>Дата</span><input type="text" name="date" id="datepicker"></label>
</div>
<div class="submit_button">
<input type="submit" value="Отправить">
</div>
Создадим функцию с названием validate. Передадим в переменные значения полей формы. Элементы form можно получить по имени, используя свойство document.forms[name]. Затем пропишем условие, что после нажатия кнопки Отправить, если поле осталось незаполненным, то появится окно с предупреждением и выполнение функции прервется. Размножим условную конструкцию для всех полей.
<script>
function validate() {
let a = document.forms["myForm"]["first_name"].value;
if (a == "") {
alert("Укажите ваше имя");
return false;
}
let b = document.forms["myForm"]["last_name"].value;
if (b == "") {
alert("Укажите вашу фамилию");
return false;
}
let с = document.forms["myForm"]["email"].value;
if (с == "") {
alert("Укажите ваш Е-майл");
return false;
}
let d = document.forms["myForm"]["tel"].value;
if (d == "") {
alert("Укажите ваш телефон");
return false;
}
let f = document.forms["myForm"]["time"].value;
if (f == "") {
alert("Укажите время визита");
return false;
}
let x = document.forms["myForm"]["date"].value;
if (x == "") {
alert("Выберите дату визита");
return false;
}
}
</script>
Заключение
Валидация формы на JS имеет свои плюсы и минусы. Проверка формы на стороне клиента, дает быструю обратную связь с пользователем, сообщение об ошибке выводится мгновенно. Самый существенный минус заключается в том, что если пользователь, заполняет форму с отключенным JavaScript в браузере, то никакой валидации не произойдет. Злоумышленник может отправить через форму какой-нибудь вредоносный код и навредить сайту. Намного безопаснее делать валидацию на стороне сервера, например на PHP. Профессионалы, делают проверку формы, как на стороне клиента, так и на стороне сервера.
Демонстрация валидации формы
-
Создано 29.05.2019 10:17:53
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.