@dmitriu256

Как вернуть объект данных из обработчика событий blur во внешнюю функцию?

Суть задачи
Разработать собственную валидацию для формы и отправить ее 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
Насколько верен подход с организацией валидации для формы?
  • Вопрос задан
  • 35 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Che603000
c 2011 javascript
Вам надо разделить события где Вы делаете валидацию (blur) и отправки формы (submit)

const isValid = false;

form.elements[i].addEventListener('blur',  e=>{ 
 // здесь проверяем 
 isValid = true; // или false - если все плохо
});

отправлять надо по событию submit
form.addEventListener('submit', e=>{
  e.preventDefault(); // блокировать действие по умолчанию
  if(isValid){  // прошла ли форма валидацию ?
     fetch(url, data) // отправляем  ajax
  } else {
     alert('У вас куча ошибок !!!!') // сообщаем польз об ошибках
  }
});


но вообще пользуйтесь библиотеками например
https://www.npmjs.com/package/validator
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
08 апр. 2020, в 04:51
16000 руб./за проект
08 апр. 2020, в 00:40
15000 руб./за проект