Мне нужно проверить на валидность поля формы. Если поле заполнено верно, добавить ему класс contact-us__field--valid. Если не верно, то contact-us__field--invalid. С начала загрузки сайта поля не должны иметь ни первого, ни второго класса.
Написал код, он работает правильно:
let userName = document.getElementById('user-name');
let userEmail = document.getElementById('user-email');
let userText = document.getElementById('user-text');
userName.onblur = function() {
if (userName.validity.valid) {
userName.classList.remove("contact-us__field--invalid");
userName.classList.add("contact-us__field--valid");
} else {
userName.classList.remove("contact-us__field--valid");
userName.classList.add("contact-us__field--invalid");
}
};
userEmail.onblur = function() {
if (userEmail.validity.valid) {
userEmail.classList.remove("contact-us__field--invalid");
userEmail.classList.add("contact-us__field--valid");
} else {
userEmail.classList.remove("contact-us__field--valid");
userEmail.classList.add("contact-us__field--invalid");
}
};
userText.onblur = function() {
if (userText.validity.valid) {
userText.classList.remove("contact-us__field--invalid");
userText.classList.add("contact-us__field--valid");
} else {
userText.classList.remove("contact-us__field--valid");
userText.classList.add("contact-us__field--invalid");
}
};
Потом решил заняться рефракторингом. Переписал в такую версию:
let fieldCheck = function(field) {
if (field.validity.valid) {
field.classList.remove("contact-us__field--invalid");
field.classList.add("contact-us__field--valid");
} else {
field.classList.remove("contact-us__field--valid");
field.classList.add("contact-us__field--invalid");
}
};
userName.onblur = fieldCheck(userName);
userEmail.onblur = fieldCheck(userEmail);
userText.onblur = fieldCheck(userText);
Но она с прогрузки страницы сразу ставит всем полям класс contact-us__field--invalid (хотя фокуса/расфокуса по полям еще не было). Где я промахнулся?