Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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;

 }
 

})
Ответить с цитированием
  #2 (permalink)  
Старый 02.06.2019, 14:50
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

Последний раз редактировалось laimas, 02.06.2019 в 14:53.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проверка формы перед отправкой Eliot456 jQuery 3 24.06.2015 09:24
Проверка авторизации перед отправкой формы Hapson AJAX и COMET 1 17.03.2014 11:58
Фоновая проверка данных формы перед отправкой egreek AJAX и COMET 6 20.07.2013 11:17
Дождаться отклика события, или проверка формы перед отправкой vid Общие вопросы Javascript 3 09.07.2013 21:36
AJAX проверка перед отправкой формы Tmin10 jQuery 4 16.11.2012 21:40