Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Проверка формы перед отправкой (https://javascript.ru/forum/misc/77647-proverka-formy-pered-otpravkojj.html)

galiog 02.06.2019 12:38

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

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

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;

 }
 

})

laimas 02.06.2019 14:50

.email-correct и .phone-correct унифицировать, то есть, определить элементы отображения ошибок полей одинаковыми для всех, под одним именем класса. Шаблоны рег. выражений можно прописать в атрибутах полей проверяемых. Тогда получить коллекцию элементов имеющих этот атрибут, обойти ее циклом, проверяя по шаблону из атрибута, и показывая элемент ошибки принадлежащий этому полю (находящийся в одном с ним родителе и т.п.) если нет соответствия.


Часовой пояс GMT +3, время: 01:05.