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;
}
})
Подскажите, как улучшить подход, а то задача вроде сделана, но решение мне не нравится.
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;
}
})