const validateForm = (function() {
let options = {};
const showFieldValidation = function(input, inputIsValid) {
if (!inputIsValid) {
if (!input.parentNode.className || input.parentNode.className.indexOf(options.classError) === -1) {
input.parentNode.className += ' ' + options.classError
}
} else {
const regError = new RegExp('(\\s|^)'+options.classError+'(\\s|$)');
input.parentNode.className = input.parentNode.className.replace(regError, '');
}
};
const testInputText = function(input) {
let inputIsValid = true;
const pattern = input.getAttribute('pattern');
if (pattern !== null) {
const reg = new RegExp(pattern, 'gi');
if (!reg.test(input.value)) {
inputIsValid = false;
}
} else {
if (input.value === '') {
inputIsValid = false;
}
}
if (inputIsValid) {
showFieldValidation(input, true);
return true;
} else {
showFieldValidation(input, false);
return false;
}
};
const testInputSelect = function(select) {
if (select.options[select.selectedIndex].value === '' || select.options[select.selectedIndex].value === '-1') {
showFieldValidation(select, false);
return false;
} else {
showFieldValidation(select, true);
return true;
}
};
const testInputCheckbox = function(input) {
const name = input.getAttribute('name');
const group = input.form.querySelectorAll('input[name="'+name+'"]:checked');
if (group.length) {
showFieldValidation(input, true);
return true;
} else {
showFieldValidation(input, false);
return false;
}
};
const prepareElements = function() {
const elements = options.form.querySelectorAll('input[required], textarea[required], select[required]');
[].forEach.call(elements, function(element) {
element.removeAttribute('required');
element.className += ' required';
if (element.nodeName.toUpperCase() === 'INPUT') {
const type = element.type.toUpperCase();
if (type === 'TEXT') {
element.addEventListener('keyup', function() {testInputText(element)});
element.addEventListener('blur', function() {testInputText(element)});
}
if (type === 'CHECKBOX') {
element.addEventListener('click', function() {testInputCheckbox(element)});
}
if (type === 'RADIO') {
element.addEventListener('click', function() {testInputCheckbox(element)});
}
}
if (element.nodeName.toUpperCase() === 'TEXTAREA') {
element.addEventListener('keyup', function() {testInputText(element)});
element.addEventListener('blur', function() {testInputText(element)});
}
if (element.nodeName.toUpperCase() === 'SELECT') {
element.addEventListener('change', function() {testInputSelect(element)});
}
});
};
const formSubmit = function() {
options.form.addEventListener('submit', function(e) {
e.preventDefault();
let validated = true;
const elements = options.form.querySelectorAll('.required');
[].forEach.call(elements, function(element) {
if (element.nodeName.toUpperCase() === 'INPUT') {
const type = element.type.toUpperCase();
if (type === 'TEXT') {
if (!testInputText(element)) validated = false;
}
if (type === 'CHECKBOX') {
if (!testInputCheckbox(element)) validated = false;
}
if (type === 'RADIO') {
if (!testInputCheckbox(element)) validated = false;
}
}
if (element.nodeName.toUpperCase() === 'TEXTAREA') {
if (!testInputText(element)) validated = false;
}
if (element.nodeName.toUpperCase() === 'SELECT') {
if (!testInputSelect(element)) validated = false;
}
});
if (validated) {
this.submit();
} else {
return false;
}
});
};
const init = function(_options) {
options = {
form : _options.form || null,
classError : _options.classError || 'error'
};
if (options.form === null || options.form === undefined || options.form.length === 0) {
console.warn('validateForm: Źle przekazany formularz');
return false;
}
prepareElements();
formSubmit();
};
return {
init : init
}
})();
document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector('.form');
validateForm.init({form : form})
});
kod jest zapożyczony w całości z tego kursu js
zmieniłem tylko var na const i let, i z == zrobiłem === coś tam usunąłem coś tam dodałem nie istotne.
Chodzi o to że jedna część tego kodu sprawdza w czasie rzeczywistym dokonania użytkownika. Jednak jest mały błąd który mnie irytuje. Gdy użytkownik porusza się tabem dodaje się klasa error zanim zdąży coś napisać, a jako że ja zajmuje się php i jeszcze nie zdążyłem się umoczyć bardziej w js. Nie mam pojęcia jak naprawić ten błąd. Gdyby ktoś miły wyjaśnił mi jak to naprawić i dlaczego, bardzo byłbym wdzięczny. Pozdrawiam :)
