Javascript проверка полей формы html

Валидация формы на JavaScript

Одной из самых частых задач при создании сайтов является валидация данных, введенных пользователем. Чтобы не нагружать сервер, валидацию данных можно проводить на стороне клиента, т.е. в браузера. Однако, это не значит, что данные не нужно проверять и на стороне сервера, так как пользователь может обойти ограничения браузерной валидации и отправить их непосредственно на сервер. Поэтому, обязательно проверяйте данные, вводимые пользователем, на сервере!

Файл index.html

Файл style.css

:root —success-color: #0cb854;
—error-color: #ee1f09;
>

body background-color: #f9fafb;
font-family: ‘Nunito’, sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
>

.container background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
width: 500px;
>

h2 text-align: center;
margin: 0 0 20px;
>

.form-control margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
>

.form-control label color: rgb(58, 58, 58);
display: block;
margin-bottom: 5px;
>

.form-control input border: 2px solid #c9c9c9;
border-radius: 4px;
display: block;
width: 100%;
padding: 10px;
font-size: 14px;
>

.form-control input:focus outline: 0;
border-color: #777;
>

.form-control.success input border-color: var(—success-color);
>

.form-control.error input border-color: var(—error-color);
>

.form-control small color: var(—error-color);
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
>

.form-control.error small visibility: visible;
>

.form button cursor: pointer;
background-color: #3498db;
border: 2px solid #3498db;
border-radius: 4px;
color: #fff;
display: block;
font-size: 16px;
padding: 10px;
margin-top: 20px;
width: 100%;
>

Файл script.js

!(function () const form = document.getElementById(«form»);
const username = document.getElementById(«username»);
const email = document.getElementById(«email»);
const password = document.getElementById(«password»);
const password2 = document.getElementById(«password2»);

// Показываем ошибку под полем
function showError(input, message) const formControl = input.parentElement;
formControl.className = «form-control error»;
const small = formControl.querySelector(«small»);
small.innerText = message;
>

// Показываем, что поле заполнено верно
function showSuccess(input) const formControl = input.parentElement;
formControl.className = «form-control success»;
>

// Проверяем адрес электронной почты на правильность
function checkEmail(input) const re =
/^(([^<>()\[\]\\.,;:\s@»]+(\.[^<>()\[\]\\.,;:\s@»]+)*)|(«.+»))@((\[4\.8\.9\.5\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]))$/;
if (re.test(input.value.trim())) showSuccess(input);
> else showError(input, «Адрес электронной почты имеет неверный формат»);
>
>

// Проверка обязательных полей
/**
*
* @param inputElements
* @returns
*/
function checkRequired(inputElements) let isRequired = false;
inputElements.forEach(function (input) if (input.value.trim() === «») showError(input, `Требуется задать значение для поля $`);
isRequired = true;
> else showSuccess(input);
>
>);

// Проверяем значение поля на соответствие минимальной и максимальной длине
function checkLength(input, min, max) if (input.value.length < min) showError(
input,
`Поле $ должно быть длиной не менее $ символов`
);
> else if (input.value.length > max) showError(
input,
`Поле $ не должно быть длиной более $ символов`
);
> else showSuccess(input);
>
>

// Проверка соответствия паролей
function checkPasswordsMatch(input1, input2) if (input1.value !== input2.value) showError(input2, «Пароли не совпадают»);
>
>

// Получаем имя поля
function getFieldName(input) return input.id.charAt(0).toUpperCase() + input.id.slice(1);
>

// Устанавливаем слушатели событий на форму
form.addEventListener(«submit», function (e) e.preventDefault();

if (checkRequired([username, email, password, password2])) checkLength(username, 3, 15);
checkLength(password, 6, 25);
checkEmail(email);
checkPasswordsMatch(password, password2);
>
>);

Таким образом, мы проводим валидацию данных в браузере, предотвращая их отправку на сервер, и тем самым снижая нагрузку на последний. Но, повторюсь, обязательно выполняйте проверку данных на сервере, так как данным, пришедшим со стороны браузера, доверять нельзя!

Создано 05.04.2022 13:42:09

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник

Проверка формы на JavaScript

В этой статье мы начнём разбираться с более сложными и функционально-законченными скриптами. Пройдём по шагам через все стадии — начиная с постановки задачи и заканчивая универсальным скриптом, готовым к употреблению. И начнём с проверки формы перед отсылкой на сервер.
Общие соображения и html-код формы

Проверка формы, пожалуй, одна из наиболее часто применяемых функций. Редкий сайт обходится без какой-либо её вариации, будь то простая отсылка сообщения на e-mail или форма сложного заказа в интернет-магазине. Польза скрипта очевидна — проверить, что пользователь заполнил все нужные поля перед отправкой и тем самым избежать проблемы получения пустых писем или отсутствия контактной информации отправителя.

Предположим, что форма у нас уже есть и состоит из следующих 4-х полей: имя, электронный адрес, тема сообщения и непосредственно само сообщение. Соответствующий html-код для такой формы будет выглядеть примерно так:

Ваше имя: *
Электронный адрес: *
Тема сообщения:
Сообщение:

* — необходимые для заполнения поля

Заметьте, что в отличие от обычной формы непосредственно в теге мы отслеживаем событие onsubmit и при его наступлении вызываем функцию проверки формы sendform().

Почему выбран именно такой способ вызова функции? Ведь можно было применить, например, событие onclick? Ответ простой — при использовании события onclick кнопку «submit» придётся заменить обычной кнопкой. И, в случае, если в броузере отключена поддержка javascript, мы не сможем отправить форму (!). Отслеживание же события onsubmit лишено этого недостатка, т.к. даже при отключенной поддержке скриптов форма будет отправлена.

Будем считать, что необходимых для заполнения полей у нас всего два: имя посетителя и его электронный адрес.

Если Вы внимательно присмотритесь к html-коду нашей формы, то заметите, что рядом с этими полями я поставил звёздочку, а в конце формы разместил сноску. Сделано это, разумеется, для удобства и элементарного уважения к пользователю.

Функция проверки формы перед отправкой

А теперь перейдём к главному — к написанию той самой функции, что будет непосредственно осуществлять проверку формы. Давайте подумаем, что нам от неё требуется? Ну, во-первых, проверить, что нужные поля заполнены, а во-вторых — отослать форму. В случае же, если несколько из обязательных полей пусты, нам нужно сформировать об этом сообщение пользователю и переместить курсор на соответствующий элемент.

Для начала напишем общую обвязку функции:

Применённый нами способ вызова функции через событие onsubmit в качестве результата работы функции требует возврата одного из логических значений: true или false. И, в зависимости от этого значения, форма либо будет отправлена, либо нет.

Теперь попробуем написать проверочную функцию, привязанную к данной конкретной форме. Как Вы помните, необходимых для заполнения полей у нас всего два: имя посетителя и его электронный адрес. Самое простое — это проверить содержимое каждого из обязательных полей на отсутствие текста:

  if (document.forms[0].email.value == "") < alert('Пожалуйста, введите электронный адрес'); document.mailform.email.focus(); return false >return true; > //-->

Как видите, функция проверки состоит из двух идентичных блоков, различающихся только именем проверяемого поля. Давайте прокомментируем каждую строчку в этих блоках:

сначала проверяем, что данное поле является пустым. И если это так, то
выводим сообщение об ошибке при помощи встроенной функции alert(). После того, как пользователь закроет окошко, мы
воспользуемся методом focus() и переместим курсор на ошибочное поле. И, наконец,
выйдем из функции, установив флажок успешности выполнения в false.
В случае же, если проверяемое поле не было пустым, то соответствующий блок просто пропускается. При пропуске всех проверочных блоков функция в качестве результата возвращает true, что свидетельствует об успешной проверке.

Универсальная функция проверки

Если нам необходимо проверить всего два или три поля, то с таким методом проверки «по-одиночке» ещё можно смириться, но что, если их несколько десятков? А ведь такое не редкость — особенно в сложных анкетах. Поэтому мы немного модифицируем нашу функцию, чтобы она не зависела от количества проверяемых полей.

Первым делом мы создадим массив, где перечислим имена всех полей, которые требуют проверки:

required = new array(«name», «email»);

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

Дополнительно к вышеописанному массиву мы добавим ещё один, который будет содержать текст ошибки для конкретного поля:

required_show = new array(«Ваше имя», «электронный адрес»);

Это позволит нам свободно варьировать текст об ошибках и правильно пользоваться русским языком, а не удовольствоваться неудобоваримыми фразами типа «name не введён».

Имея массив обязательных для заполнения полей, всю проверку можно осуществлять в цикле. Вот как будет выглядеть модифицированная функция проверки:

В цикле происходит проверка всех полей формы на совпадение с «обязательными». В случае, если совпадение произошло, проверка осуществляется аналогично тому, как это было описано выше, но с одним нюансом — введение массива с сообщениями об ошибках потребовало небольшой модификации функции alert(), так что теперь текст ошибки напрямую зависит от имени поля.

Вот, в общем-то, и всё. Данная функция вполне универсальна и с минимальными корректировками (в сущности — содержимое двух массивов) может быть адаптирована к любой форме.

Источник