Показать сообщение отдельно
  #1 (permalink)  
Старый 02.06.2019, 12:38
Интересующийся
Отправить личное сообщение для galiog Посмотреть профиль Найти все сообщения от galiog
 
Регистрация: 28.04.2016
Сообщений: 17

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

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

window.addEventListener('load', function(){

let form = document.querySelector('.data-form');
let loader = document.querySelector('.loader');



form.addEventListener('submit', function(e){
e.preventDefault();
let email = document.querySelector('#inputEmail').value;
let phone = document.querySelector('#inputPhone').value;
if(validate(email, phone)){
    loader.style.display = 'flex';
    setTimeout(()=>{
        form.innerHTML = `<h3>Your request has been sent.</h3>`
    }, 5000);
}
})

function validate(email, phone) {
    let valid = true;
    let regEmail = /^.+@.+\..+$/;
    let regPhone = /^\d[\d\(\)\ -]{4,14}\d$/;
    if(regEmail.test(email) == false) {
        valid = false;
       document.querySelector('.email-correct').style.display = "block";
    } else{
        document.querySelector('.email-correct').style.display = "none";
    }
    if(regPhone.test(phone) == false) {
        valid = false;
        document.querySelector('.phone-correct').style.display = "block";
    }  else {
        document.querySelector('.phone-correct').style.display = "none";
    }
    return valid;

 }
 

})
Ответить с цитированием