В чем ошибка валидации формы?

Question

[Игорь Мясников]

Добрый день.
Есть скрипт формы:

form.js

import {mailValidaton} from './validators/mailValidation';
import {fioValidation} from './validators/fioValidation';
import {politeValidaton} from './validators/politeValidate';
import {feedbackValidaton} from './validators/feedbackValidation';

export const form = document.getElementsByTagName('form')[0];

let isMailValid = mailValidaton();
let isFioValid = fioValidation();
let isPoliteCheckboxValid = politeValidaton();
let isFeedbackValid = feedbackValidaton();

form.addEventListener(
	'submit',
	(e) => {
		e.preventDefault();
		console.log({isMailValid});
		console.log({isFioValid});
		console.log({isPoliteCheckboxValid});
		console.log({isFeedbackValid});
	},
	false
);

И например, скрипт валидации поля ФИО:

fioValidation

import {form} from '../form';
import {setValueLocalstorage} from '../helpers/setLocalstorage';

export function fioValidation() {
	const fio = form.querySelector('input[name="feedback-fio"');
	const fioContainer = fio.closest('.input-text');
	const fioHelp = fioContainer.querySelector('small');
	let valid;

	if (localStorage.getItem(fio.name)) {
		fio.value = localStorage.getItem(fio.name);
		fioHelp.innerHTML = '';
		fioHelp.classList.remove = 'error';
		fioContainer.classList.remove('invalid');
		fioContainer.classList.add('valid');
	}

  let regExp = /^[А-ЩЄЮІЇЯ][а-щьєюіїя']{1,}(-[А-ЩЄЮІЇЯ][а-щьєюіїя']{1,})? [А-ЩЄЮІЇЯ][а-щьєюіїя']{1,}(-[А-ЩЄЮІЇЯ][а-щьєюіїя']{1,})? [А-ЩЄЮІЇЯ][а-щьєюіїя']{1,}$/;

	fio.addEventListener(
		'blur',
		() => {
			if (!regExp.test(fio.value)) {
				fioHelp.innerHTML = 'Введите ваши Фамилию Имя Отечество';
				fioHelp.classList.add = 'error';
				fioContainer.classList.add('invalid');
				fioContainer.classList.remove('valid');
				valid = false;
			} else {
				fioHelp.innerHTML = '';
				fioHelp.classList.remove = 'error';
				fioContainer.classList.remove('invalid');
				fioContainer.classList.add('valid');
				setValueLocalstorage(fio);

				valid = fio.value;
			}
		},
		false
	);

	return valid;
}

Не могу понять почему в логах всегда undefined независимо оттого меняю я инпуты или нет

console.log

Сайт

Comments

[Александр]

оформите одну валидацию, одного инпута в песочнице, я думаю вам помогут.

[Август Милович]

Может console.log(isFioValid), без скобок объекта

Answer 1

[Александр]

Доброго дня!

На мой взгляд, проблема в том, что, например, значения isFioValid из forms.js и valid из fioValidation.js во время выполнения никак не связаны друг с другом.

Ваша функция

export function fioValidation() {
  ...
  let valid;
  ...
}

в своем теле не устанавливает значение valid, следовательно результатом ее выполнения будет undefined:

let isFioValid = fioValidation(); // isFioValid === undefined

После этого при наступлении DOM-события вы меняете эту самую переменную valid, которая живет в замыкании у прослушивателя fio.addEventListener. Но так как это примитивное значение, то изменение этого valid никак не затрагивает значение переменной isFioValid, которой уже присвоено значение undefined.

В вашем случае сходу можно попробовать возвращать из функции не примитивное значение, а объект:
let fioValid = {isValid: false, name: ''};
а потом при наступлении события blur устанавливать нужное значение если все хорошо (или сбрасывать если наоборот):

fioValid.isValid = true;
fioValid.name = fio.name;