Как реализовать проверку корректности заполнения формы?

Question

[danysm0d]

Есть форма:

<div class="Players">
        <div id="PlayerA" >
            <input type="text" id="nameA" placeholder="*Введите псевдоним"  onblur="checkName('nameA')" class="Default" >
            <br/>
            <br>
            <input type="text" id="ratingA" placeholder="*Введите рейтинг" onblur="checkRating('ratingA')"  class="Default">
        </div>
        <div id="PlayerB">
            <input type="text" id="nameB" placeholder="*Введите псевдоним" onblur="checkName('nameB')" class="Default">
            <br/>
            <br>
            <input type="text" id="ratingB" placeholder="*Введите рейтинг" onblur="checkRating('ratingB')" class="Default">
        </div>
    </div>
    <div class="invisibleDivMatch">
        <h1>OLOLO</h1>
    </div>

После корректного ввода всех 4 инпутов должен появляться блок .invisibleDivMatch. Как это реализовать? Проверку корректности заполнения отдельных инпутов реализовал вот так:

function checkRating(id) {
    var rating=document.getElementById(id);
    if(!rating.value){
        rating.className="error";
        return false;
    }
    else if(!/^\d+$/.test(rating.value)) {
        rating.className = "error";
        return false;
    }
    else{
        rating.className="true";
        return true;
    }
}

function checkName(id) {
    var name=document.getElementById(id);
    if(!name.value){
        name.className="error";
        return false;
    }
    else if(!/\D/.test(name.value)) {
        name.className = "error";
        return false;
    }
        else{
        name.className="true";
    }
}

Answer 1

[0xD34F]

Элементам формы добавляем 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;
}

Answer 2

[sergmit]

Можно так:

let checkRating = false;
let checkName = false;
function checkRating(id) {
    var rating=document.getElementById(id);
    if(!rating.value){
        rating.className="error";
        checkRating = false;
    }
    else if(!/^\d+$/.test(rating.value)) {
        rating.className = "error";
        checkRating = false;
    }
    else{
        rating.className="true";
        if (checkName === true) {
            showDiv();
        }
        checkRating = true;
    }
}

function checkName(id) {
    var name=document.getElementById(id);
    if(!name.value){
        name.className="error";
        checkName = false;
    }
    else if(!/\D/.test(name.value)) {
        name.className = "error";
        checkName = false;
    }
        else{
        name.className="true";
        if (checkRating === true) {
            showDiv();
        }
        checkName = true;
    }
}

function showDiv() {
    // Показ div
}