Пишу валидацию формы. Вот код:
const Validator = function(options) {
const form = document.getElementById(options.id),
elementsForm = [...form.elements].filter(item => item.tagName !== 'BUTTON'),
error = new Set(),
pattern = {
email: /^\w+@\w+\.\w+$/,
phone: /^\+?[78]([()-]*\d){10}$/
},
validorMethod = {
notEmpty(elem) {
if (elem.value.trim() === "") {
return false;
}
return true;
},
pattern(elem, pattern) {
return pattern.test(elem.value);
}
}
const isValid = (elem) => {
const method = options.method[elem.id];
if (method !== undefined) {
return method.every(item => validorMethod[item[0]](elem, pattern[item[1]]));
}
return true;
};
const checkIt = (event) => {
let target = event.target;
if (isValid(target)) {
showSuccess(target);
error.delete(target);
} else {
showError(target);
error.add(target);
}
console.log(error);
};
elementsForm.forEach((elem) => {
elem.addEventListener('change', checkIt);
});
const showError = (elem) => {
elem.classList.remove('validator_success');
elem.classList.add('validator_error');
if (!elem.nextElementSibling.classList.contains('error-message')) {
const errorDiv = document.createElement('div');
errorDiv.textContent = "You have an error there";
errorDiv.classList.add('error-message');
elem.insertAdjacentElement('afterend', errorDiv);
}
};
const showSuccess = (elem) => {
elem.classList.remove('validator_error');
elem.classList.add('validator_success');
if (elem.nextElementSibling.classList.contains('error-message')) {
elem.nextElementSibling.remove();
}
};
for (let key in options.pattern) {
pattern[key] = options.pattern[key];
};
form.addEventListener('submit', (event) => {
elementsForm.forEach((elem) => {
checkIt({
target: elem
});
});
if (error.size) {
event.preventDefault();
}
})
};
const valid = new Validator({
id: 'myform',
pattern: {
phone: /^\+380\w{9}/
},
method: {
'email': [
['notEmpty'],
['patern', 'email']
],
'phone': [
['notEmpty'],
['patern', 'phone']
]
}
});
<section>
<form id="myform">
<label for="email">email</label>
<input type="text" name="email" id="email">
<label for="phone">phone</label>
<input type="text " name="phone" id="phone">
<br>
<button type="submit">submit</button>
<button type="reset">reset</button>
</form>
</section>
Когда я ввожу некорректные данные возникает следующая ошибка:
validator.js:25 Uncaught TypeError: validorMethod[item[0]] is not a function
at validator.js:25
at Array.every ()
at isValid (validator.js:25)
at HTMLInputElement.checkIt (validator.js:31)
Вот и на github залил https://github.com/Streammer/form-validation.git
Сборка персонального компьютера от Artline: умный выбор для современных пользователей