Валидация формы на чистом js

Question

Делаю валидацию полей формы. Подскажите как можно сократить код, получается много дублирования. Смысл в том что я делаю кнопку отправки не активной пока не заполнены поля. Также когда поле заполнено нужно убрать сообщение об ошибке, сейчас оно постоянно.

formValidate = () => {
  const nameValue = document.querySelector("#popup-name-form");
  const phoneValue = document.querySelector("#popup-phone-form");
  const emailValue = document.querySelector("#popup-email-form");
  const btn = document.querySelector(".popup__btn-post");

  const checkedForm = () => {
    if (nameValue.value !== "") {
      btn.removeAttribute("disabled");
      btn.classList.remove("disapled");
      btn.classList.add("green");
      nameValue.style.borderBottom = "2px solid #33cc33";
    } else {
      btn.setAttribute("disabled", "disabled");
      btn.classList.remove("green");
      btn.classList.add("disapled");
      nameValue.style.borderBottom = "2px solid red";

      let error = document.createElement("p");
      error.className = "error";
      error.classList.add("error");
      error.innerHTML = "Введите имя";
      nameValue.parentElement.insertBefore(error, nameValue);
    }
    if (phoneValue.value !== "") {
      btn.removeAttribute("disabled");
      btn.classList.remove("disapled");
      btn.classList.add("green");
      phoneValue.style.borderBottom = "2px solid #33cc33";
    } else {
      btn.setAttribute("disabled", "disabled");
      btn.classList.remove("green");
      btn.classList.add("disapled");
      phoneValue.style.borderBottom = "2px solid red";

      let error = document.createElement("p");
      error.className = "error";
      error.classList.add("error");
      error.innerHTML = "Введите номер телефона";
      phoneValue.parentElement.insertBefore(error, phoneValue);
    }
  };

  nameValue.addEventListener("keyup", checkedForm);
  phoneValue.addEventListener("keyup", checkedForm);
};

formValidate();

      <form class="popup__form" id="validate-form">
        <div class="form__content">
          <div class="content__wrap">
            <input
              class="form__input-modal form__input_width field _req"
              type="text"
              placeholder="Имя *"
              id="popup-name-form"
            />
          </div>
          <div class="content__wrap">
            <input
              class="form__input-modal form__input_width field _req"
              placeholder="Телефон *"
              name="form_phone-number"
              id="popup-phone-form"
            />
          </div>
        </div>
        <div class="content__wrap">
          <input
            class="form__input-modal field _req email"
            type="text"
            placeholder="E-mail *"
            id="popup-email-form"
          />
        </div>
        <input
          class="form__input-modal"
          type="text"
          placeholder="Комментарий"
        />
        <div class="form__checkbox">
          <input
            class="custom__checkbox _req"
            id="checkbox"
            type="checkbox"
            checked
          />
          <label for="checkbox"
            >Я согласен (на) с обработкой Персональных данных</label
          >
        </div>
        <button type="submit" class="button popup__btn-post disabled" disabled>
          Оставить заявку
        </button>
      </form>

Answer 1

const form = document.forms.form1

form.addEventListener('change', function() {
    this.btnSubmit.disabled = this.checkValidity() ? false : true
})

Array.from(form.elements).forEach(inp => {
    if(inp.required && inp.type != 'checkbox') {
        inp.addEventListener('change', () => {
            if(inp.checkValidity()) {
                inp.classList.remove('invalid')
                inp.classList.add('valid')
            } else {
                inp.classList.remove('valid')
                inp.classList.add('invalid')
                inp.reportValidity()
            }
        })
    }
})

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
input:not([type="checkbox"]):required.valid {
    border-bottom: 2px solid #33cc33;
}
input:not([type="checkbox"]):required.invalid {
    border-bottom: 2px solid red;
}
a {
    color: black;
    text-decoration: none;
}

<form class="popup__form" name="form1">
    <div class="form__content">
        <div class="content__wrap">
            <input
                    class="form__input-modal form__input_width field _req"
                    type="text"
                    placeholder="Имя *"
                    title="Введите имя"
                    required
            />
        </div>
        <div class="content__wrap">
            <input
                    class="form__input-modal form__input_width field _req"
                    type="tel"
                    placeholder="Телефон *"
                    name="form_phone-number"
                    title="Введите номер телефона"
                    required
            />
        </div>
    </div>
    <div class="content__wrap">
        <input
                class="form__input-modal field _req email"
                type="email"
                placeholder="E-mail *"
                title="Введите корректно поле email"
                required
        />
    </div>
    <input
            class="form__input-modal"
            type="text"
            placeholder="Комментарий"
    />
    <div class="form__checkbox">
        <label><input type="checkbox" required title="Поставьте галку" checked> Я согласен (на) с обработкой <a href="#">персональных данных</a></label>
    </div>
    <button type="submit" name="btnSubmit" class="button popup__btn-post disabled" disabled>
        Оставить заявку
    </button>
</form>

примерно как-то так

БЛОГ НА HUSL

Валидация формы на чистом js

Ответы (1 шт):