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

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]

"Форму" надо сделать настоящей формой - заменяем элементу .players тег, должен быть form вместо div. Элементы формы - убираем onblur, добавляем required и pattern:

<form class="players">
  <div class="player">
    <input placeholder="*Введите псевдоним" required pattern=".*\D.*">
    <br>
    <input placeholder="*Введите рейтинг" required pattern="\d+">
  </div>
  <div class="player">
    <input placeholder="*Введите псевдоним" required pattern=".*\D.*">
    <br>
    <input placeholder="*Введите рейтинг" required pattern="\d+">
  </div>
</form>
<h1 class="message hidden">HELLO, WORLD!!</h1>

Определяем стили - для выделения криво заполненных элементов формы и управления видимостью дополнительного контента, который должен стать доступен после корректного заполнения всей формы:

.error {
  color: white;
  background: red;
}

.hidden {
  display: none;
}

Собственно проверка - на форму вешается обработчик события input, внутри которого дёргается проверка корректности заполнения для элемента, явившегося источником события, и для формы в целом. По результатам проверок происходит добавление или снятие классов:

document.querySelector('.players').addEventListener('input', e => {
  e.target.classList.toggle(
    'error',
    !e.target.checkValidity()
  );

  document.querySelector('.message').classList.toggle(
    'hidden',
    !e.currentTarget.checkValidity()
  );
});

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
}