Как сделать вывод всех ошибок при проверке формы js

Рейтинг: 1Ответов: 0Опубликовано: 30.01.2023

У меня есть форма:

<form
        action="/"
        method="GET"
        class="form"
        novalidate
        onsubmit="validateForm(event)"
      >
        <div class="input__name">
          <label for="name" class="input__title">Cardholder name</label>
          <input
            type="text"
            id="cardName"
            placeholder="e.g. Jane Appleseed"
            class="long-input"
            maxlength="30"
            onkeypress="validateName(event)
            "
          />
          <p class="input__error" id="errorName"></p>
        </div>

        <div class="input__number">
          <label for="number" class="input__title">Card number</label>
          <input
            type="text"
            id="number"
            class="long-input"
            maxlength="19"
            onkeypress="validateNumber()"
            placeholder="e.g. 1234 5678 9123 0000"
          />
          <p class="input__error" id="errorNumber"></p>
        </div>

        <div class="input__date">
          <div class="date-title">
            <label for="date" class="input__title">exp. date (mm/yy)</label>
            <label for="cvc" class="input__title">cvc</label>
          </div>
          <input
            type="number"
            id="month"
            onkeypress="this.value=this.value.substring(0,1);"
            class="short-input"
            placeholder="MM"
          />
          <input
            type="number"
            id="year"
            onkeypress="this.value=this.value.substring(0,1);"
            class="short-input"
            placeholder="YY"
          />

          <input
            type="number"
            id="cvc"
            onkeypress="this.value=this.value.substring(0,2);"
            class="cvc-section"
            placeholder="e.g. 123"
          />
          <div class="error__bottom">
            <span class="input__error" id="errorDate"></span>
            <span class="input__error" id="errorCvc"></span>
          </div>
        </div>
        <input
          type="submit"
          value="Confirm"
          class="btn"
          onclick="changeForm()"
        />
      </form>

И есть простая кастомная валидация на js:

const validateForm = (e) => {
  e.preventDefault();
  const nameValue = document.querySelector("#cardName").value;
  const numberValue = document.querySelector("#number").value;
  const monthValue = document.querySelector("#month").value;
  const yearValue = document.querySelector("#year").value;
  const cvcValue = document.querySelector("#cvc").value;

  const errorName = document.querySelector("#errorName");
  const errorNumber = document.querySelector("#errorNumber");
  const errorDate = document.querySelector("#errorDate");
  const errorCvc = document.querySelector("#errorCvc");


  if (nameValue.length < 5 || nameValue.length > 25) {
    errorName.innerText = "Wrong format, please fill in the field";
    return false;
  } else {
    errorName.innerText = "";
  }

  if (numberValue.length < 19) {
    errorNumber.innerText = "Wrong format, please fiil in the field";
    return false;
  } else {
    errorNumber.innerText = "";
  }

  if (monthValue.length < 2 || yearValue.length < 2) {
    errorDate.innerText = "Can't be blank";
    return false;
  } else {
    errorDate.innerText = "";
  }

  if (cvcValue.length < 3) {
    errorCvc.innerText = "Can't be blank";
    return false;
  } else {
    errorCvc.innerText = "";
  }

  return true;
};

Вопрос: Как можно сделать чтобы если какие-то из полей были пустые/не прошли валидацию, то ошибки выводились по этим полям?

У меня на данный момент при отправке пустой формы ошибка появляется только на первом поле(должны на всех), при заполнении первого поля ошибка появляется на второй и т.д.

Я пытался сделать это всё через одно большое условие:

  if (nameValue.length < 5 || nameValue.length > 25) {
    errorName.innerText = "Wrong format, please fill in the field";
    return false;
  } else if (numberValue.length < 19) {
    errorNumber.innerText = "Wrong format, please fiil in the field";
    return false;
  } else if (monthValue.length < 2 || yearValue.length < 2) {
    errorDate.innerText = "Can't be blank";
    return false;
  } else if (cvcValue.length < 3) {
    errorCvc.innerText = "Can't be blank";
    return false;
  } else {
    errorName.innerText = "";
    errorNumber.innerText = "";
    errorDate.innerText = "";
    errorCvc.innerText = "";
    return true;
  }

Проблема в том что оно всё так же выводит по одному полю, но при заполнении ошибка не пропадает, пока не будут все условия верны.

Ответы

Ответов пока нет.