Проверка адреса email и номера телефона на javascript

Подскажите пожалуйста, как сделать проверку правильности написания email и телефона, пока сделал проверку на ненаполненность полей, но хотелось бы проверить правильность. И не могу подсветить textarea почему то таким же способом как input ((
Спасибо.

$("#sendMail").on("click", function () {



    //создаем экземпляр класс FormData, тут будем хранить всю информацию для отправки

    var formData = new FormData();



    //присоединяем наш файл

    jQuery.each($('#file_v')[0].files, function(i, file) {

        formData.append('file_v', file);

    });



    //присоединяем остальные поля

    let name = $("#name").val().trim();

    let email = $("#email").val().trim();

    let tel = $("#tel").val().trim();

    let number_order = $("#number_order").val().trim();

    let message = $("#message").val().trim();

    let checkbox_check = $("#checkbox_check").prop('checked');



    //проверяем поля на заполнение

    if (name === '' || email === '' || tel === '' || number_order === '' || message === '' || !checkbox_check) {

        $('.modal_error').show();

        $.each($('.input-box input'),function(i, v){

            if($(this).val() == ''){

                $(this).addClass('empty_field');

            }else{

                $(this).removeClass('empty_field');

            }

        });

        return false;

    }



    formData.append('name', name);

    formData.append('email', email);

    formData.append('tel', tel);

    formData.append('number_order', number_order);

    formData.append('message', message);





    //отправляем через ajax

    $.ajax({

        url: "assets/ajax/mail.php",

        type: "POST",

        dataType : "json",

        cache: false,

        contentType: false,

        processData: false,

        data: formData, //указываем что отправляем

        beforeSend: function () {

            $("#form_contact").prop("disable", true);

            $(".main-btn").attr("disabled", true);

            $( ".loading_mail").show();



        },

        success: function(data){

            //стереть данные из инпутов

            $("#form_contact").trigger("reset");

            /////////////**********////////////

            //убрать загрузачное окно

            $( ".loading_mail").hide();

            ////////////**********//////////////

            //убрать подсветку

            $('.input-box input').removeClass('empty_field');

            $(".main-btn").attr("disabled", false);

            $('.modal_success').show();

            console.log(data);

        }

    });

    return false;

});

.checkbox {



}



.checkbox__input {

  display: none;

}



.checkbox__input:checked + .checkbox__label::after {

  transform: scale(1);

}



.checkbox__label {

  font-size: 16px;

  line-height: 140%;

  display: inline-flex;

  align-items: center;

  position: relative;

  cursor: pointer;

}



.checkbox__label::before {

  content: "";

  align-self: flex-start;

  flex: 0 0 24px;

  height: 24px;

  background: #dcdce8;

  border-radius: 4px;

  margin: 0px 10px 0px 0px;



}





.checkbox__label::after {

  transition: transform 0.5s ease 0s;

  content: "";

  width: 16px;

  height: 16px;

  position: absolute;

  top: 4px;

  left: 4px;

  background: #f07d54;

  border-radius: 4px;

  transform: scale(0);

}





.checkbox__label a {

  color: #f07d54;

}





/*  Загрузка отправки формы обратной связи  */



.comment-form {

  position: relative;

}



.loading_mail{

  content: "";

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(51, 51, 51, 0.9) url(loading.gif) center / 50px no-repeat;

  display: none;

}





.input-box input.empty_field {

  box-shadow: 0 0 10px red;

}



/* Custom dropdown */



/* Стили для неактивного модального окна */





/* стилизация содержимого страницы */





/* свойства модального окна по умолчанию */



   /* свойства модального окна по умолчанию */

 .modal {

   position: fixed;

   /* фиксированное положение */

   top: 0;

   right: 0;

   bottom: 0;

   left: 0;

   background: rgba(0, 0, 0, 0.5);

   /* цвет фона */

   z-index: 1050;

   /*opacity: 0;*/

   /* по умолчанию модальное окно прозрачно */

   -webkit-transition: opacity 400ms ease-in;

   -moz-transition: opacity 400ms ease-in;

   transition: opacity 400ms ease-in;

   /* анимация перехода */

   pointer-events: none;

   /* элемент невидим для событий мыши */

 }

/* при отображении модального окно */

.modal:target {

  /*opacity: 1;*/

  pointer-events: auto;

  overflow-y: auto;

}

/* ширина модального окна и его отступы от экрана */

.modal-dialog {

  position: relative;

  width: auto;

  margin: 10px;

}

@media (min-width: 576px) {

  .modal-dialog {

    max-width: 500px;

    margin: 30px auto;

  }

}

/* свойства для блока, содержащего контент модального окна */

.modal-content {

  position: relative;

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -webkit-flex-direction: column;

  -ms-flex-direction: column;

  flex-direction: column;

  background-color: #fff;

  -webkit-background-clip: padding-box;

  background-clip: padding-box;

  border: 1px solid rgba(0, 0, 0, .2);

  border-radius: .3rem;

  outline: 0;

}

@media (min-width: 768px) {

  .modal-content {

    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);

    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);

  }

}

/* свойства для заголовка модального окна */

.modal-header {

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -webkit-align-items: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: justify;

  -webkit-justify-content: space-between;

  -ms-flex-pack: justify;

  justify-content: space-between;

  padding: 15px;

  border-bottom: 1px solid #eceeef;

}

.modal-title {

  margin-top: 0;

  margin-bottom: 0;

  line-height: 1.5;

  font-size: 1.25rem;

  font-weight: 500;

}

/* свойства для кнопки "Закрыть" */

.close {

  float: right;

  font-family: sans-serif;

  font-size: 24px;

  font-weight: 700;

  line-height: 1;

  color: #000;

  text-shadow: 0 1px 0 #fff;

  /*opacity: .5;*/

  text-decoration: none;

}

/* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */

.close:focus,

.close:hover {

  color: #000;

  text-decoration: none;

  cursor: pointer;

  opacity: .75;

}

/* свойства для блока, содержащего основное содержимое окна */

.modal-body {

  position: relative;

  -webkit-box-flex: 1;

  -webkit-flex: 1 1 auto;

  -ms-flex: 1 1 auto;

  flex: 1 1 auto;

  padding: 15px;

  overflow: auto;

}



#openModal-error {

  background: rgba(255, 0, 0, 0.6);

}



#openModal-success {

  background: rgba(0, 0, 0, 0.5);

}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
 <form id="form_contact" action="" method="post" enctype="multipart/form-data" class="contact-one__form">  <!---->
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="input-box has-feedback nameBlock">
                                        <label for="name" class="control-label ">Имя*</label>
                                        <input required type="text" id="name" placeholder="Иван Иванов" name="name" value="" class="" >
                                    </div>
                                </div><!-- /.col-lg-6 -->
                                <div class="col-lg-6">
                                    <div class="input-box">
                                        <label for="email" class="control-label">Email-адрес*</label>
                                        <input required type="email" id="email" placeholder="Email" name="email" value="" class="">
                                    </div>
                                </div><!-- /.col-lg-6 -->
                                <div class="col-lg-6">
                                    <div class="input-box _req">
                                        <label for="tel" class="control-label">Номер телефона*</label>
                                        <input required type="tel" id="tel" placeholder="+79997772255" name="tel" value="" class="">
                                    </div>
                                </div><!-- /.col-lg-6 -->
                                <div class="col-lg-6">
                                    <div class="input-box">
                                        <label for="number_order" class="control-label">№ заказа*</label>
                                        <input required id="number_order" type="text" placeholder="0000000-я00" name="number_order" value="" class="">
                                    </div>
                                </div><!-- /.col-lg-6 -->
                                <div class="col-lg-12">
                                    <div class="input-box">
                                        <label for="message" class="control-label">Сообщение*</label>
                                        <textarea required class="_req" id="message" name="message"
                                        placeholder="Сообщение" class="">
                                        </textarea>
                                    </div>
                                </div><!-- /.col-lg-12 -->
                                <div class="col-lg-12">
                                    <div class="file">
                                        <div class="file__item">
                                            <input type=file id="file_v" name="file_v" accept="image/*,video/*" class="file__input">
                                            <div class="file__button">Прикрепить файл</div>
                                        </div>
                                        <div id="formPreview" class="file__preview"></div>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="checkbox">
                                        <input required id="checkbox_check" checked type="checkbox" name="agreement" class="checkbox__input">
                                        <label for="checkbox_check" class="checkbox__label _error"><span>Я даю согласие на обработку персональных данных в соответствии с <a href="">Условиями</a>*</span></label>
                                    </div>
                                </div>
                                <div class="col-lg-12 text-left">
                                    <br>
                                    <button  id="sendMail" class="main-btn"> Отправить </button>
                                </div>
                            </div>
                        </form>

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

При неправильном значении рамки поля input подсвечиваются красным, при правильном — зеленым. Кнопка отправки формы submit срабатывает только, если все поля заполнены корректно. Это все полезно, когда надо отправить данные в правильном виде на сервер.

В примере ниже проверяем поля на правильный ввод Email и телефона.

Саму форму мы писать не будем — это делали в предыдущем уроке. Либо можете скачать исходники с формой из первого урока.

Добавляем атрибуты к input’ам

Сначала обратимся к нашей разметке из первого урока. Открываем файл index.html. Нам необходимо добавить атрибуты для каждого input’a. К комментариях я написал, где добавить код.

<div class="input-box">
    <input
      type="text"
      placeholder="Ваше имя"
      name="name" <!-- добавить -->
      id="name" <!-- добавить --> 
      data-reg="^[А-ЯЁ][а-яё]*$" <!-- добавить -->
    />
    <label for="name">Только русские буквы</label> <!-- добавить -->
  </div>
  <div class="input-box">
    <input
      type="text"
      placeholder="Введите email"
      name="email"  <!-- добавить -->
      id="email"  <!-- добавить -->
      data-reg="^[-w.]+@([A-z0-9][-A-z0-9]+.)+[A-z]{2,4}$" <!-- добавить -->
    />
    <label for="email">В формате: name@mail.com</label> <!-- добавить -->
  </div>
  <div class="input-box">
    <input
      type="text"
      placeholder="Введите телефон"
      name="phone" <!-- добавить -->
      id="phone" <!-- добавить -->
      data-reg="^((+7|7|8)+([0-9]){10})$" <!-- добавить -->
    />
    <label for="phone">В формате: 88000000000 или 78000000000</label> <!-- добавить -->
  </div>

К Input добавляем атрибуты:

1. name — для обращения к данным формы после отправки на сервер
2. id — уникальный ID для считывания DOM-элемента в JavaScript
3. data-reg — кастомный атрибут, содержит регулярное выражение для проверки на правильность ввода. Список регулярных выражений можно посмотреть по ссылке.

В теге Label мы указываем подсказку для пользователя.

Скрипт для валидации формы

В исходнике из предыдущего урока откройте файл app.js — он должен быть пустым. В начале считываем саму форму из файла index.html, а также все ее элементы.

const form = document.forms["form"]; // считываем форму
const formArr = Array.from(form); // формируем массив из элементов формы
const validFormArr = []; // в этом массиве хранятся поля, которые нужно проверить
const button = form.elements["button"]; // считываем кнопку

Далее мы формируем массив полей формы, которые будем проверять на валидность. Он называется validFormArr. Для этого мы сначала «прогоняем» массив всех полей формы и ищем те поле, в которых задан атрибут data-reg.

В конце добавляем обработчики событий для элемента формы form. Вызываем функцию inputHandler при событии input — т.е. вводе значений в поля. А функцию buttonHandler вызываем при клике по кнопке button.

formArr.forEach((el) => {
  if (el.hasAttribute("data-reg")) {
    el.setAttribute("is-valid", "0");
    validFormArr.push(el);
  }
});

form.addEventListener("input", inputHandler);
button.addEventListener("click", buttonHandler);

После пишем сами функции для проверки валидности. Первая функция inputHandler проверяет есть ли у выбранного поля атрибут data-reg, и если есть, вызывает другую функцию inputCheck, которая как раз проверяет валидность. Функция inputCheck принимает поле формы, считывает его значений, а также само регулярное выражение data-reg. После чего мы создаем объект RegExp, которые как раз нужен для работы с «регулярками». С помощью метода test проверяем соответствует ли введенное значение в поле нашему регулярному выражению. Если соответствует, то делаем поле зеленым. В противном случае красным.

function inputHandler({ target }) {
  if (target.hasAttribute("data-reg")) {
    inputCheck(target);
  }
}

function inputCheck(el) {
  const inputValue = el.value;
  const inputReg = el.getAttribute("data-reg");
  const reg = new RegExp(inputReg);
  if (reg.test(inputValue)) {
    el.setAttribute("is-valid", "1");
    el.style.border = "2px solid rgb(0, 196, 0)";
  } else {
    el.setAttribute("is-valid", "0");
    el.style.border = "2px solid rgb(255, 0, 0)";
  }
}

Последняя функция buttonHandler предназначена для обработки нажатия кнопки. В начале создаем массив allValid — в него мы будем добавлять логические значения (0 и 1) для проверки валидности каждого поля. Далее с помощью функции reduce проходим по массиву allValid. Если все поля валидные, то функция вернет true. Если хоть одно поле не соответствует маске, то вернет false. В конце проверяем итоговое значение isAllValid, если хоть одно поле не валидное — блокируем отправку формы.

function buttonHandler(e) {
  const allValid = [];
  validFormArr.forEach((el) => {
    allValid.push(el.getAttribute("is-valid"));
  });
  const isAllValid = allValid.reduce((acc, current) => {
    return acc && current;
  });

  if (!Boolean(Number(isAllValid))) {
    e.preventDefault();
  }
}

Исходный код на GitHub

Весь исходный код из данного урока вы можете скачать по ссылке с моего GitHub.

JavaScript is a scripting programming language that also helps in validating the user’s information. Have you ever heard about validating forms? Here comes into the picture JavaScript, the Scripting language which is used for validations and verification. To get deeper into this topic let us understand with examples.

Form Validation: Form validation is validating the values which are entered by the end-user during a form submission. For validating a form, Regular Expression plays a vital role. Let’s see what Regular Expression means.

Regular Expression: A Regular Expression is an object that describes a pattern of characters. Regular Expressions are used to perform pattern-matching and search-and-replace functions on text. So, in this area JavaScript plays a major role in validating the values. To, get more idea about the terminology let us see through an example.

Let’s understand how to validate forms using REGULAR EXPRESSION in JavaScript through examples.

Example 1: Form validation (validating an email)

Assume a registration form that contains the basic details of the end-users like Name, Phone number, Email id, and Address. When the user enters the email id without the domain name and “@” symbol the form turns out an error that says “domain name not included”. Ever wonder how this happens? This happens due to the Regular Expressions in JavaScript. Regular Expression can be defined as a stopper(pattern -match) to the values which are not correct i.e., “indicating an error while the end-user is entering the wrong details instead of the given regular expression “. Some of the characters used are “[abc],[^abc],w,W,S”. Thus validating the email address entered by the end-user is done by JavaScript.

Output:

This picture says a perfect email address is entered by the user, so the form is accepted and registration is done. When a person enters the wrong email the text box of the email is highlighted with red color border indicating it is an error.

Example 2: Form Validation (validating phone number )

Suppose assume the same registration form. Ever wonder why the number should be started with only from 6, 7, 8, 9 and not the remaining numbers. Here, also the picture is played by Regular Expression which helps in validating one’s correct mobile number. Restricting the users to enter only 10 digits where the first digit should of numbers “6,7,8,9” and rest all digits can be of any number from 0-9 is done purely by regular expressions “[^6-9][,0-9]” which help in validating the forms whether the information entered is relevant to the pattern specified.

Output:

This picture says a perfect phone number is entered by the user, so the form is accepted and registration is done. Upon entering the wrong phone number the text box of the phone number is highlighted with red color border indicating it is an error.

Thus, Validating a form can be done through JavaScript in the web pages. It should be tie up with  HTML which is a markup language. Although many other languages came into the picture for validations JavaScript is the basic way to learn how to understand the validations performed in the webpages. 

JavaScript is a scripting programming language that also helps in validating the user’s information. Have you ever heard about validating forms? Here comes into the picture JavaScript, the Scripting language which is used for validations and verification. To get deeper into this topic let us understand with examples.

Form Validation: Form validation is validating the values which are entered by the end-user during a form submission. For validating a form, Regular Expression plays a vital role. Let’s see what Regular Expression means.

Regular Expression: A Regular Expression is an object that describes a pattern of characters. Regular Expressions are used to perform pattern-matching and search-and-replace functions on text. So, in this area JavaScript plays a major role in validating the values. To, get more idea about the terminology let us see through an example.

Let’s understand how to validate forms using REGULAR EXPRESSION in JavaScript through examples.

Example 1: Form validation (validating an email)

Assume a registration form that contains the basic details of the end-users like Name, Phone number, Email id, and Address. When the user enters the email id without the domain name and “@” symbol the form turns out an error that says “domain name not included”. Ever wonder how this happens? This happens due to the Regular Expressions in JavaScript. Regular Expression can be defined as a stopper(pattern -match) to the values which are not correct i.e., “indicating an error while the end-user is entering the wrong details instead of the given regular expression “. Some of the characters used are “[abc],[^abc],w,W,S”. Thus validating the email address entered by the end-user is done by JavaScript.

Output:

This picture says a perfect email address is entered by the user, so the form is accepted and registration is done. When a person enters the wrong email the text box of the email is highlighted with red color border indicating it is an error.

Example 2: Form Validation (validating phone number )

Suppose assume the same registration form. Ever wonder why the number should be started with only from 6, 7, 8, 9 and not the remaining numbers. Here, also the picture is played by Regular Expression which helps in validating one’s correct mobile number. Restricting the users to enter only 10 digits where the first digit should of numbers “6,7,8,9” and rest all digits can be of any number from 0-9 is done purely by regular expressions “[^6-9][,0-9]” which help in validating the forms whether the information entered is relevant to the pattern specified.

Output:

This picture says a perfect phone number is entered by the user, so the form is accepted and registration is done. Upon entering the wrong phone number the text box of the phone number is highlighted with red color border indicating it is an error.

Thus, Validating a form can be done through JavaScript in the web pages. It should be tie up with  HTML which is a markup language. Although many other languages came into the picture for validations JavaScript is the basic way to learn how to understand the validations performed in the webpages. 

Очень часто перед отправкой формы на сервер требуется проверить введённые данные, например, ввёл ли пользователь имя, email, установил ли пароль, совпадают ли пароли (если мы говорим про простую форму регистрации). Подобный код проверки может написать даже начинающий JavaScript-разработчик.

Очень часто перед отправкой формы на сервер требуется проверить введённые данные, например, ввёл ли пользователь имя, email, установил ли пароль, совпадают ли пароли (если мы говорим про простую форму регистрации). Подобный код проверки может написать даже начинающий JavaScript-разработчик. Сложность может вызывать разве что проверка корректности электронного адреса. Если проверять корректность email с помощью обычных проверок, то на выходе мы увидим некомпактный и неэффективный код, перегруженный множеством операторов if, и не факт, что он будет работать правильно. Например, все мы знаем, что в любом электронном адресе должен быть символ «@» и «.», но если проверить наличие в строке только этих символов, то проверка явно не будет полной. Например, мы не учитываем следующие ошибки:

• @john.sm@
• .john@
• .john@corp.
• .j@cor.@

Все эти адреса вряд ли можно назвать корректными. Какие есть варианты? Можно проверять, чтобы в строке был только один символ @. Но всё равно есть много неправильных вариантов. Например:

• john.corp@company
• джон@corp.com
• john@corp..

Чтобы не загромождать код лишними проверками, есть один выход — использовать регулярные выражения. Только с помощью регулярных выражений можно быстро и компактно проверить правильность e-mail. Давайте напишем функцию emailValidation(), которая будет проверять правильность ввода электронного адреса:

function emailValidation(value) {

let txt = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;

return txt.test(value);

}

Да, регулярное выражение очень сложное, но оно учитывает все возможные варианты правильного построения email и избавляет вас от множества ненужных проверок.

Осталось только написать функцию checkEmail, через которую мы будем передавать содержимое текстового поля email нашей функции emailValidation. Если она возвращает true, мы выводим сообщение ОК, в противном случае сообщаем, что адрес некорректный.

function checkEmail() {

let email = document.form.email.value;

if (emailValidation(email)) {

window.alert("OK");

} else {

window.alert("Email is incorrect");

}

}

Можно немного усложнить задачу и проверять адрес на лету, после ввода символов в поле. Поэтому мы перепишем функцию checkEmail так, чтобы оно выводило сообщение о корректности введённого адреса в определённый элемент документа. Результат мы будем выводить в span. Вот изменённый код:

function checkEmail() {

let email = document.form.email.value;

if (emailValidation(email)) {

document.getElementById('span1').innerText = 'OK';

} else {

document.getElementById('span1').innerText = 'Email is incorrect';

}

}

Логика функции осталась той же, изменился лишь способ отображения результата. Всё остальное — дело техники. Для проверки «на лету» нужно использовать событие onKeyDown для поля ввода:

<input type="text" name="email" id="email" onKeyDown="checkEmail();">

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

function phoneValidation(value) {

return /^+d{1,2}(d{3})d{3}-d{2}-d{2}$/.test(value);

}

Обратите внимание, что функции проверки email и номера телефона выясняют, соответствуют ли введённые пользователем данные определённому шаблону. Они не проверяют существование такого email и номера телефона. Например, вы можете ввести +55(333)044-99-44. Это корректный номер телефона, т. е. такой номер может существовать, но существует ли — никто не знает. Проверить существование email можно только путём отправки сообщения на этот адрес, но этим никто не занимается. С технической точки зрения реализовать такую проверку можно: отправить email, получить ответ от сервера и выдать результат. Однако подобные проверки порождают ненужный трафик.

Также на некоторых сайтах есть возможность проверки не только корректности введённых данных, но и их допустимости. Например, вы при регистрации ввели email test@mail.ru. С точки зрения функции валидации он является корректным, поскольку соответствует регулярному выражению. Однако этот email может принадлежать другому пользователю, кто уже указал его при регистрации. К сожалению, Javascript не умеет непосредственно обращаться к базе данных, чтобы проверить, есть ли такой email в БД. Поэтому здесь есть два варианта:

• Остановиться на функции emailValidation и отправлять данные на сервер в случае, если они похожи на правильные. Дальнейшей обработкой будет заниматься программа на сервере (как правило, это скрипт PHP).
• Использовать технологию AJAX, позволяющую вызвать стороннюю программу для обработки данных. Например, наш сценарий вызовет PHP-скрипт, который проверит, указывался ли такой email при регистрации другого пользователя, и передаст результат проверки нашему JS-сценарию. Наш сценарий на основании полученного ответа выполнит определённые действия (сообщит пользователю, что email занят или свободен).

Проверка на стороне клиента не заменяет проверку на стороне сервера!

Всегда проверяйте входящие пользовательские данные на сервере. Не каждый запрос будет исходить от браузера, и не каждый браузер будет запускать код проверки. Проверка на стороне клиента — это усовершенствование, которое делает вашу систему более удобной в использовании.

Тем не менее вам может не потребоваться JavaScript для более простой проверки формы…

Проверка поля HTML5

Современные браузеры, поддерживающие HTML5, могут проверять поля без JavaScript. Атрибут type устанавливает ограничения и может изменять пользовательский интерфейс стандартного поля <input>:

Если вы не указываете или используете неподдерживаемый атрибут, браузер назначает полю тип text. Это должно позволить пользователю вводит данные в старых браузерах, даже если это не может быть проверено автоматически.

Другие атрибуты управления ограничениями включают:

Интерфейс input

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

Используйте самый очевидный тип type, но будьте осторожны с особыми случаями, такими как кредитные карты. Это числовые значения, но ролик мыши и курсорные клавиши бесполезны. Лучше использовать стандартный ввод text:

<input
  type="text"
  name="ccnumber"
  inputmode="numeric"
  autocomplete="cc-number"
/>

Браузер может предлагать такие функции, как съёмка камерой или подтверждение по SMS, когда встречает тип autocomplete.

Встроенная проверка/валидация

Браузер гарантирует, что значение соответствует ограничениям атрибутов type, min, max, step, minlength, maxlength, pattern, и required:

<input type="number" min="1" max="100" required />

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

• 1. атрибут novalidate в <form>, или
• 1. атрибут formnovalidate в кнопку отправки формы

CSS стили проверки/валидации

Следующие псевдоклассы позволяют стилизовать input в соответствии с его состоянием:

Эти селекторы имеют одинаковую специфичность, поэтому порядок не важен. Например:

input:invalid { color: red; }
input:enabled { color: blue; }

Поля input с недопустимыми значениями окрашиваются в красный, но это переопределяется, потому что все не отключённые поля выделены синим цветом.

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

:invalid {
  color: red;
  border-color: red;
}

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

Constrain Validation API

Constraint Validation API предоставляет параметры настройки, которые могут улучшить или изменить стандартное поведение проверки полей HTML5. Вы можете выполнять проверку после взаимодействия с пользователем, отображать определённые сообщения об ошибках или реализовать программную проверку, например подтвердить:

• поля нового пароля и подтверждения пароля совпадают

• одна дата следует за другой

• пользователь ввёл номер телефона, адрес электронной почты или и то, и другое.

В следующих разделах описывается общий подход к Constrain Validation API в вашем коде.

1. Отключение проверки формы по умолчанию

Ваш код должен отключать валидацию формы по умолчанию и сообщения об ошибках, установив свойство атрибута <form> noValidate = true, например:

const myform = document.getElementById('myform');
myform.noValidate = true;

2. Добавление обработчика событий формы

Далее, вы должны добавить обработчик событий для отправки формы или изменения отдельных полей, например:

// валидация формы при отправке
myform.addEventListener('submit', validateForm);

Функция обработчик может проверить, что вся форма валидна используя методы элемента формы:

1. checkValidity() — возвращает true, если все дочерние элементы соответствуют ограничениям и проходят валидацию.

2. reportValidity() — возвращает true, если дочерний элемент не подлежит валидации или соответствует ограничениям.

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

Эта простая функция обработчик останавливает отправку формы, когда одно или несколько полей не проходят валидацию:

// Валидация формы при отправке
function validateForm(e) {

  const form = e.target;

  if (!form.checkValidity()) {

    // Форма не прошла валидацию - отменить отправку
    e.preventDefault();
    e.stopImmediatePropagation();

  }

};

3. Валидация отдельных полей

Отдельные поля имеют следующие свойства и методы проверки ограничений:

• willValidate — Возвращает true, если элемент является кандидатом на участие в валидации.

• validationMessage Сообщение проверки — пустая строка, если поле прошло валидацию.

• validity — ValidityState объект с проверенным свойство установленным в true или false. Не прошедшие валидацию поля содержат одно или несколько из следующих свойств со значением true:

• setCustomValidity() — Устанавливает сообщение об ошибке для недопустимого поля. Установите пустою строку для валидного значения или оно останется не валидным навсегда.

• checkValidity() — Возвращает true, если значение input проходит валидацию. Оно похоже на validity. Если значение не валидно вызывается событие invalid event.

Функция-обработчик validateForm() может пройтись по всем полям формы и применить класс invalid к его родительскому элементу.

function validateForm(e) {

  const
    form = e.target,
    field = Array.from(form.elements);

  // применяем/удаляем класс invalid
  field.forEach(i => {
    if (i.checkValidity()) {
      // поле валидно - удаляем класс
      i.parentElement.classList.remove('invalid');
    }
    else {
      // поле не валидно -- добавляем класс
      i.parentElement.classList.add('invalid');
    }
  });

  if (!form.checkValidity()) {
    // форма не прошла валидацию - отменяем отправку
    e.preventDefault();
    e.stopImmediatePropagation();
  }
};

Если вы определили обязательное поле email в вашей html5 форме:

<div>
  <label for="email">email</label>
  <input type="email" id="email" name="email" required />
  <p class="help">Please enter a valid email address.</p>
</div>

Этот скрипт добавит класс invalid к контейнеру <div>, когда значение поля email не проходит валидацию. CSS может изменить стиль и показать или скрыть сообщение об ошибке:

.help { display: none; }

.invalid .help { display: block; }

.invalid label, .invalid input, .invalid .help {
  color: red;
  border-color: red;
}

4. Добавление проверки пользовательского поля

В этой демонстрации на CodePen показан пример контактной формы с полями имени (обязательное поле), электронной почты и телефона. Валидация происходит при отправке, и форма считается валидной когда имя, адрес электронной почты и/или телефон содержат допустимые значения.

Функция validateForm():

• сбрасывает сообщение валидации и родительский стиль ошибки для каждого поля

• передаёт не пустую строку методу .setCustomValidity() поле электронной почты и телефона, если они не определены и,

• применяет класс invalid к родительскому элементу всех недопустимых полей.

// проверка формы
function validateForm(e) {

  const
    form = e.target,
    field = Array.from(form.elements);

  // сброс полей
  field.forEach(i => {
    i.setCustomValidity('');
    i.parentElement.classList.remove('invalid');
  });

  // email или телефон заданы?
  const err = form.email.value || form.tel.value ? '' : 'error';
  form.email.setCustomValidity(err);
  form.tel.setCustomValidity(err);

  if (!form.checkValidity()) {

    // форма не прошла валидацию - отмена отправки
    e.preventDefault();
    e.stopImmediatePropagation();

    // добавляем класс invalid
    field.forEach(i => {
      if (!i.checkValidity()) {
        // поле не прошло валидацию - добавляем класс
        i.parentElement.classList.add('invalid');
      }
    });
  }
}

Резюме

Валидация формы может быть обыденной, но это необходимая деятельность веб-разработчика. Время написания собственных регулярных выражения для электронной почты и проверки введённых чисел давно прошло. Используйте стандартные типы input, а затем, при необходимости проверяйте их с Constraint Validation API.

Никогда не забывайте проверять пользовательские данные на сервере!

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

Чтобы сэкономить время и избежать ненужной нагрузки на ресурсы вашего сервера, вы можете проверить данные формы на стороне клиента (то есть в системе пользователя), используя JavaScript, прежде чем передавать их на веб-сервер для дальнейшей обработки.

Проверка на стороне клиента также полезна для создания лучшего пользовательского взаимодействия; она быстрее, потому что проверка происходит в веб-браузере пользователя, тогда как проверка на стороне сервера происходит на сервере, который требует, чтобы вводимые пользователем данные были сначала отправлены на сервер, где происходит обработка; пользователь также должен дождаться ответа сервера, чтобы узнать, что именно пошло не так.

В этом разделе мы более подробно рассмотрим, как выполнять валидацию форм на JavaScript и обрабатывать любые ошибки ввода.

Проверка на стороне клиента не является заменой или альтернативой проверке на стороне сервера. Вы должны всегда проверять данные формы на стороне сервера, даже если они уже проверены на стороне клиента, потому что пользователь может отключить JavaScript в своем браузере.

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

Что ж, давайте посмотрим как это работает.

Создание HTML-формы

Давайте сначала создадим простую HTML-форму, которую мы будем проверять на стороне клиента, используя JavaScript, когда пользователь нажимает кнопку отправки (submit). Для этого создадим HTML-файл с именем application-form.html и поместим в него следующий код, а затем сохраним его где-нибудь в вашей системе.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple HTML Form</title>
    <link rel="stylesheet" href="style.css">
    <script src="validator.js"></script>
</head>
<body>
<form name="contactForm" onsubmit="return validateForm()" action="confirmation.php" method="post">
    <h2>Форма заявки</h2>
    <div class="row">
        <label>Имя</label>
        <input type="text" name="name">
        <div class="error" id="nameErr"></div>
    </div>
    <div class="row">
        <label>Email</label>
        <input type="text" name="email">
        <div class="error" id="emailErr"></div>
    </div>
    <div class="row">
        <label>Номер телефона</label>
        <input type="text" name="mobile" maxlength="10">
        <div class="error" id="mobileErr"></div>
    </div>
    <div class="row">
        <label>Страна</label>
        <select name="country">
            <option>Select</option>
            <option>Australia</option>
            <option>India</option>
            <option>United States</option>
            <option>United Kingdom</option>
        </select> 
        <div class="error" id="countryErr"></div>
    </div>
    <div class="row">
        <label>Пол</label>
        <div class="form-inline">
            <label><input type="radio" name="gender" value="male">Мужской</label>
            <label><input type="radio" name="gender" value="female">Женский</label> 
        </div>
        <div class="error" id="genderErr"></div>
    </div>
    <div class="row">
        <label>Хобби <i>(не обязательно)</i></label>
        <div class="form-inline">
            <label><input type="checkbox" name="hobbies[]" value="sports">Спорт</label>
            <label><input type="checkbox" name="hobbies[]" value="movies">Кино</label>
            <label><input type="checkbox" name="hobbies[]" value="music">Музыка</label>  
        </div>
    </div>        
    <div class="row">
        <input type="submit" value="Submit">
    </div>
</form>
</body>
</html>

Создание скрипта валидации формы

Теперь мы собираемся создать файл JavaScript, который содержит наш полный скрипт проверки.

Что ж, давайте создадим файл JavaScript с именем validator.js и поместим в него следующий код, а затем сохраним его в том же месте, где вы сохранили предыдущий HTML-файл. Просмотрите каждую строку следующего примера кода, чтобы понять, как работает проверка JavaScript:

// Определяем функции для отображения сообщения об ошибке
function printError(elemId, hintMsg) {
    document.getElementById(elemId).innerHTML = hintMsg;
}

// Определяем функции для проверки формы
function validateForm() {
    // Получение значений элементов формы
    var name = document.contactForm.name.value;
    var email = document.contactForm.email.value;
    var mobile = document.contactForm.mobile.value;
    var country = document.contactForm.country.value;
    var gender = document.contactForm.gender.value;
    var hobbies = [];
    var checkboxes = document.getElementsByName("hobbies[]");
    for(var i=0; i < checkboxes.length; i++) {
        if(checkboxes[i].checked) {
            // Заполняем массив хобби выбранными значениями
            hobbies.push(checkboxes[i].value);
        }
    }
    
    // Определяем переменные ошибок со значением по умолчанию
    var nameErr = emailErr = mobileErr = countryErr = genderErr = true;
    
    // Проверяем имя
    if(name == "") {
        printError("nameErr", "Пожалуйста, введите ваше имя");
    } else {
        var regex = /^[a-zA-Zs]+$/;                
        if(regex.test(name) === false) {
            printError("nameErr", "Пожалуйста, введите правильное имя");
        } else {
            printError("nameErr", "");
            nameErr = false;
        }
    }
    
    // Проверяем адрес электронной почты
    if(email == "") {
        printError("emailErr", "Пожалуйста, введите адрес вашей электронной почты");
    } else {
        // Регулярное выражение для базовой проверки электронной почты
        var regex = /^S+@S+.S+$/;
        if(regex.test(email) === false) {
            printError("emailErr", "Пожалуйста, введите действительный адрес электронной почты");
        } else{
            printError("emailErr", "");
            emailErr = false;
        }
    }
    
    // Проверяем номер мобильного телефона
    if(mobile == "") {
        printError("mobileErr", "Пожалуйста, введите номер вашего мобильного телефона");
    } else {
        var regex = /^[1-9]d{9}$/;
        if(regex.test(mobile) === false) {
            printError("mobileErr", "Пожалуйста, введите действительный 10-значный номер мобильного телефона");
        } else{
            printError("mobileErr", "");
            mobileErr = false;
        }
    }
    
    // Проверяем страну
    if(country == "Select") {
        printError("countryErr", "Пожалуйста, выберите вашу страну");
    } else {
        printError("countryErr", "");
        countryErr = false;
    }
    
    // Проверяем пол
    if(gender == "") {
        printError("genderErr", "Пожалуйста, выберите ваш пол");
    } else {
        printError("genderErr", "");
        genderErr = false;
    }
    
    // Запрещаем отправку формы в случае ошибок
    if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) {
       return false;
    } else {
        // Создаем строки из входных данных для предварительного просмотра
        var dataPreview = "Вы ввели следующие данные: n" +
                          "Имя: " + name + "n" +
                          "Email: " + email + "n" +
                          "Номер: " + mobile + "n" +
                          "Страна: " + country + "n" +
                          "Пол: " + gender + "n";
        if(hobbies.length) {
            dataPreview += "Hobbies: " + hobbies.join(", ");
        }
        // Отображаем входные данные в диалоговом окне перед отправкой формы
        alert(dataPreview);
    }
};

Доступ к значению отдельного поля формы можно получить с помощью синтаксиса document.formName.fieldName.value или document.getElementsByName(name).value. Но, чтобы получить значения из поля формы, которое поддерживает множественный выбор, например, группу чекбоксов, вам нужно использовать оператор цикла, как показано в примере выше (строки с 14 по 21).

Чтобы проверить, является ли формат входных данных правильным или нет, мы должны использовать регулярные выражения. Это один из наиболее эффективных методов проверки пользовательских данных.

Вышеприведенный скрипт также отображает данные, введенные пользователем в диалоговом окне для предварительного просмотра перед отправкой формы на веб-сервер.

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

Добавление стилей для формы

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

body {
    font-size: 16px;
    background: #f9f9f9;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
h2 {
    text-align: center;
    text-decoration: underline;
}
form {
    width: 300px;
    background: #fff;
    padding: 15px 40px 40px;
    border: 1px solid #ccc;
    margin: 50px auto 0;
    border-radius: 5px;
}
label {
    display: block;
    margin-bottom: 5px
}
label i {
    color: #999;
    font-size: 80%;
}
input, select {
    border: 1px solid #ccc;
    padding: 10px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-radius: 2px;
}
.row {
    padding-bottom: 10px;
}
.form-inline {
    border: 1px solid #ccc;
    padding: 8px 10px 4px;
    border-radius: 2px;
}
.form-inline label, .form-inline input {
    display: inline-block;
    width: auto;
    padding-right: 15px;
}
.error {
    color: red;
    font-size: 90%;
}
input[type="submit"] {
    font-size: 110%;
    font-weight: 100;
    background: #006dcc;
    border-color: #016BC1;
    box-shadow: 0 3px 0 #0165b6;
    color: #fff;
    margin-top: 10px;
    cursor: pointer;
}
input[type="submit"]:hover {
    background: #0165b6;
}

Теперь откройте файл application-form.html в веб-браузере и попробуйте заполнить некоторые данные и посмотреть, как скрипт реагирует на ввод недопустимых данных в поле формы.

Чтобы узнать о проверке на стороне сервера, ознакомьтесь с Руководством по валидации форм в PHP.