Суть задачи
Разработать собственную валидацию для формы и отправить ее ajax запросом на сервер
!Без валидации вопрос решаю следующим образом
//ajax
let xhr = new XMLHttpRequest();
xhr.open('POST', 'https://myserver.test');
xhr.setRequestHeader('Content-type', 'application/json; charset = utf-8');
//Формируем объект данных
let data = {
name: name.value,
phones: phone.value
};
console.log(data);
xhr.send(JSON.stringify(data));
xhr.addEventListener('readystatechange', function () {
if (xhr.readyState < 4) {
messageBox.textContent = message.loading;
} else if (xhr.readyState === 4 && xhr.status === 200) {
elem.style.background = '#fff';
messageBox.textContent = message.success;
} else {
messageBox.textContent = message.error;
}
});
}
Что есть на данный момент полностью рабочая валидация полей, без отправки формы на сервер.
Пример объекта который получаю в blur
{name: "test", email: "test@gmail.com", textarea: "привет мир", phone: "номер телефона"}
Как из
form.elements[i].addEventListener('blur', function(){}) вернуть значение во внешнюю ф-кцию а именно в
function formValidate(form)?
Далее из formValidate(form) сделаю return data и передам в AJAX.
formValidate(mainForm);
//FORM Validation
function formValidate(form){
//Подсказка
let info = document.createElement('div');
info.classList.add('info');
//Количество символов в textarea
let num = 50;
let data = {};
//Обход всех эдементов формы
for(let i = 0; i < form.elements.length; i++) {
//ВАЛИДАЦИЯ НУЖНЫХ МНЕ ПОЛЕЙ ПО значению name у элементов формы
form.elements[i].addEventListener('blur', function(){
let names = this.name;
let check;
switch (names) {
case 'name':
//console.log('name');
check = /^[А-Яа-яЁёA-Za-z]{3,11}$/.test(this.value);
//console.log(this.value);
break;
case 'email':
// console.log('mail');
check = /^[a-zA-Z._-]+\d*@[a-z]+?\.[a-z]{2,3}$/.test(this.value);
// console.log(this.value);
break;
case 'phone':
//console.log('phone');
// console.log(this.value);
check = validatePhone(this.value);
break;
//Необязательное поле, может оставаться пустым
case 'textarea':
//console.log('textarea');
if(this.value === '' || this.value.length <= num) {
check = true;
}
break;
default:
check = false;
}
//Проверка валидации
if(check) {
console.log('Ура вы прошли проверку');
this.style.border = '2px solid green';
//КАК В ЭТОМ МЕСТЕ вернуть data в главную функцию???
data[this.name] = this.value;
console.log(data); //отлично формируется объект на уровне обработчика blur
}else{
console.log('Что то пошло не так!');
this.style.border = '2px solid red';
this.value = '';
}
});
//Показать количество символов в сообщении
form.elements.textarea.addEventListener('input', function(){
if(this.value.length <= num) {
this.maxLength = num;
console.log(this.value);
console.log(this.value.length);
console.log(`Осталось символов ${num - this.value.length}`);
info.innerText = `Осталось символов ${num - this.value.length}`;
}
});
} //END Обход всех элементов формы
//Подсказка количество символов в сообщении
form.elements.textarea.parentNode.append(info);
}
P.S
Насколько верен подход с организацией валидации для формы?
