Обработка валидации

by SamokhinDmitro_33JS

HTML

<form action="#" method="post" class="form contacts-form" id="contacts-form" name="contactsForm">

                        <div class="form__group">
                            <label for="contacts-name" class="form__label d-sm-none d-md-block">Ваше имя</label>
                            <input type="text"
                                   class="form__input"
                                   id="contacts-name"
                                   name="name"
                                   placeholder="Введите Ваше имя"
                            >
                        </div>

                        <div class="form__group">
                            <label for="contacts-phone" class="form__label d-sm-none d-md-block">Номер телефона</label>
                            <input type="tel"
                                   class="form__input"
                                   id="contacts-phone"
                                   name="phone"
                                   placeholder="Введите номер телефона"
                            >
                        </div>

                        <div class="form__group">
                            <label for="contacts-email" class="form__label d-sm-none d-md-block">E-mail</label>
                            <input type="email"
                                   class="form__input"
                                   id="contacts-email"
                                   name="email"
                                   placeholder="Введите email"
                            >
                        </div>

                        <div class="form__group">
                            <label for="contacts-message" class="form__label d-sm-none d-md-block">Сообщение</label>
                            <textarea class="form__textarea"
                                      id="contacts-message"
                                      rows="3"
                                      name="message"
               ...

JavaScript

class Validation {
  constructor() {
    //this.formValidate = this.formValidate.bind(this);
  }

  //Validation Form
  formValidate() {

    let names = this.name;
    let check;
    switch (names) {
      case 'name':
        console.log(this);
        check = /^[А-Яа-яЁёA-Za-z]{3,11}$/.test(this.value);
        break;

      case 'email':
        console.log(this);
        check = /^[a-zA-Z._-]+\d*@[a-z]+?\.[a-z]{2,3}$/.test(this.value);
        break;

      case 'phone':
        console.log(this);
        check = this.validatePhone(this.value);
        break;

        //Необязательное поле, может оставаться пустым
      case 'message':
        check = true;
        break;

      default:
        check = false;
    }

    // console.log(this);
    //Проверка валидации
    if (check) {
      this.style.border = '2px solid green';

    } else {
      this.style.border = '2px solid red';
      this.value = '';
    }
  }
  //END Validation Form

  //Phone Validation
  validatePhone(val) {
    console.log(val);
    let massCode = [67, 96, 97, 98, 50, 66, 95, 99, 63, 73, 93, 91, 92, 94];

    let resCode = massCode.map(function(i) {
      return '0' + i;
    });

    let str = resCode.join('|');

    let reg = new RegExp("/\\+38\\(" + str + "\\)\\-(\d{3})\\-(\d{2})\\-(\d{2})/");

    if (reg.test(val)) {
      return true;
    } else {
      return false;
    }
  }
  //КОНЕЦ КЛАССА 
  
  
  /////////////////////////////////////////////////
 ///Кусок main.js в котором подключаю свой класс
  //Обработка форм
  processForm(myform);
    function processForm(form) {
let validation = new Validation();
        //Обход всех элементов формы
        for (let i = 0; i < form.elements.length; i++) {

            if(form.elements[i].type !== 'submit'){
                form.elements[i].setAttribute('required', 'required');
               

                 form.elements[i].addEventListener('blur', validation.formValidate.bind(validation));
            }
        }

       ...