Элементам формы добавляем data-атрибут, указывающий, значения каких типов они содержат, и, соответственно, как надо проверять их корректность:
<div class="players">
<div class="player">
<input placeholder="*Введите псевдоним" data-type="name">
<br>
<input placeholder="*Введите рейтинг" data-type="rating">
</div>
<div class="player">
<input placeholder="*Введите псевдоним" data-type="name">
<br>
<input placeholder="*Введите рейтинг" data-type="rating">
</div>
</div>
<h1 class="message hidden">HELLO, WORLD!!</h1>
Какие вообще есть способы проверки корректности значений - объект, ключами являются имена типов данных, значениями функции, принимающие значения из элементов формы и возвращающие
true или
false:
const validations = {
name: val => /\D/.test(val),
rating: val => /^\d+$/.test(val),
};
Собственно проверка - на форму вешается обработчик события
input, внутри которого перебираются элементы формы, из них извлекается имя типа данных, по имени типа данных из объекта с валидаторами извлекается функция проверки, ей передаётся значение элемента, введённое пользователем. Чтобы форма в целом была признана корректно заполненной, каждая из проверок должна оказаться успешной, в зависимости от полученного результата показываем или прячем дополнительный контент. Ну и ещё тот элемент, который пользователь только что редактировал, обрабатывается в особом порядке - в зависимости от результата его проверки у него добавляется или снимается класс, предназначенный для выделения некорректно заполненного элемента:
document.querySelector('.players').addEventListener('input', function(e) {
const error = Array.from(this.querySelectorAll('[data-type]'), n => {
const error = !validations[n.dataset.type](n.value);
if (n === e.target) {
n.classList.toggle('error', error);
}
return error;
}).some(Boolean);
document.querySelector('.message').classList.toggle('hidden', error);
});
Остаётся определить стили - для выделения криво заполненных элементов формы и управления видимостью дополнительного контента, который должен стать доступен после корректного заполнения всей формы:
.error {
color: white;
background: red;
}
.hidden {
display: none;
}
