纯JS表单验证

Question

我是一个被困在以下几个问题：

1. 如何在提交按钮第一次点击之后添加所需的误差只有一次？而不是在任何后续的点击后。
2. 如何启动功能（检查有效的（））用正则表达式验证后，才第一个函数（check必选（））与需要检查的实施？
3. 如何显示其相对元素的正则表达式验证后，每个错误？现在，所有的错误都显示在手机输入最后一块。

下面是对情况的jsfiddle：https://jsfiddle.net/SanchezMalina/hno7v4tf/35/

或代码在这里：

// regexp pattern functions
    function validateEmail(email) {
      let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(email.toLowerCase());
    }

    function validatePhone(phone) {
      let re = /^[0-9]{7,20}$/;
      return re.test(phone.toLowerCase());
    }

    function validateName(name) {
      let re = /^([a-zA-Z0-9А]){3,50}$/;
      return re.test(name.toLowerCase());
    }

    let flag = false;

    // check required fields
    function checkRequired() {

      let notFilled = document.querySelectorAll('.is-required');

      notFilled.forEach(function (el) {

        if (el.value === '') {

          el.parentElement.classList.add('is-empty');

          addRequiredError();

        } else {

          el.parentElement.classList.remove('is-empty');

          removeRequiredError();

        }

      });

    }

    let formFields = document.querySelectorAll('.form__field');

    //add required error message
    function addRequiredError() {

      let errorRequiredMsg = document.createElement('div');
      errorRequiredMsg.classList.add('input-required');
      errorRequiredMsg.innerHTML = `<span> This field is required! </span>`;

      formFields.forEach( function (elem) {

        if (elem.classList.contains('is-empty')) {

          elem.appendChild(errorRequiredMsg);

        }

      });

    }

    //remove required error message
    function removeRequiredError() {

      let requiredErrorMsg = document.querySelectorAll('.form__field .input-required');

      requiredErrorMsg.forEach(function (elem) {

        elem.parentElement.removeChild(elem);

      });

      flag = true;

    }

    //check validation inputs
    function checkValid() {

      let firstName = document.querySelector('#f-name');
      let lastName = document.querySelector('#l-name');
      let selectCountry = document.querySelector('.form__select');
      let phone = document.querySelector('#cell');
      let email = document.querySelector('#email');

      formFields.forEach(function () {

        if(!validateName(firstName.value) && !validateName(lastName.value) && !validatePhone(phone.value) && !validateEmail(email.value)) {

          firstName.parentElement.classList.add('is-error');
          lastName.parentElement.classList.add('is-error');
          selectCountry.parentElement.classList.add('is-error');
          phone.parentElement.classList.add('is-error');
          email.parentElement.classList.add('is-error');

          addValidError();

        } else {

          firstName.parentElement.classList.remove('is-error');
          lastName.parentElement.classList.remove('is-error');
          selectCountry.parentElement.classList.remove('is-error');
          phone.parentElement.classList.remove('is-error');
          email.parentElement.classList.remove('is-error');

          removeValidError();

        }

      });

    }

    //add invalid error message
    function addValidError() {

      let errorValidMsg = document.createElement('div');
      errorValidMsg.classList.add('input-error');
      errorValidMsg.innerHTML = `<span> Input is invalid! </span>`;

      formFields.forEach(function (elem) {

        if (elem.classList.contains('is-error')) {

          elem.appendChild(errorValidMsg);

        }

      });

      // for (let i = 0; i < formFields.length; i++) {
      //
      //   if (formFields[i].classList.contains('is-error')) {
      //
      //     formFields[i].appendChild(errorValidMsg);
      //
      //   }
      // }
    }

    //remove invalid error message
    function removeValidError() {

      let requiredErrorMsg = document.querySelectorAll('.input-error');

      requiredErrorMsg.forEach(function (elem) {

        elem.parentNode.removeChild(elem);

      })
    }

    //form submit handler
    let formTrial = document.querySelector('.form__main');

    formTrial.addEventListener('submit', function (event) {

      event.preventDefault();

      checkRequired();

      console.log(flag);

      if(flag !== false) {

        checkValid();

      }

    });

.form__main {
  display: block;
  margin: 25px auto;
  width: 450px;
}

.form__field {
  position: relative;
  margin: 10px 0;
  padding: 5px 15px;
  background-color: #fff;
  height: 50px;
}

.form__field_select::after {
  content: "";
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-color: #000 transparent transparent transparent;
  position: absolute;
  top: 55%;
  right: 17px;
  transform: translateY(-50%);
}

.form__input {
  position: absolute;
  left: 0;
  top: 10px;
  right: 0;
  bottom: 10px;
  padding-left: 45px;
  background: none;
  font-size: 14px;
  font-weight: 400;
  font-family: "Open Sans", sans-serif;
  width: 100%;
  color: #333;
  line-height: 1.714;
  box-sizing: border-box;
}

.form__input:focus ~ .form__label,
.form__input:valid ~ .form__label {
  top: 0;
  left: 45px;
  transform: scale(0.6, 0.6);
  color: #000;
}

.form__input:focus ~ .form__label[for=cell],
.form__input:valid ~ .form__label[for=cell] {
  top: 0;
  left: 125px;
}

.form__input[type=tel] {
  padding-left: 125px;
}

.form__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px white inset;
}

.form__label {
  position: absolute;
  top: 50%;
  left: 50px;
  transform-origin: left top;
  transition: all 0.3s ease;
  transform: translateY(-50%);
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  color: #999999;
  line-height: 1.714;
}

.form__label[for=cell] {
  left: 135px;
}

.form__select {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  padding-left: 50px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent;
  border-color: #fff;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  color: #000;
  line-height: 1.714;
}

.form__country-code {
  position: absolute;
  color: #000;
  left: 50px;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  line-height: 2;
  height: 100%;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  border-right: 1px solid;
  padding-right: 20px;
  z-index: 2;
}

.form .btn {
  width: 100%;
  margin: 20px 0;
}

.form .btn:hover {
  transform: translateY(-5px);
  box-shadow: 1px 3px 20px #c5f833;
}

<form method="post" class="form__main" novalidate>
  <div class="form__field">
    <i class="icon icon-user"></i>
    <input class="form__input is-required" id="f-name" type="text" required>
    <label class="form__label" for="f-name">First Name</label>
  </div>
  <div class="form__field">
    <i class="icon icon-user"></i>
    <input class="form__input is-required" id="l-name" type="text" required>
    <label class="form__label" for="l-name">Last Name</label>
  </div>
  <div class="form__field">
    <i class="icon icon-envelop"></i>
    <input class="form__input" id="email" type="text" required>
    <label class="form__label" for="email">Email</label>
  </div>
  <div class="form__field form__field_select">
    <i class="icon icon-pin"></i>
    <select class="form__select" name="country">
      <option value="ro" selected>USA</option>
      <option value="ua">India</option>
      <option value="il">Spain</option>
    </select>
  </div>
  <div class="form__field">
    <i class="icon icon-phone"></i>
    <span class="form__country-code">+10000</span>
    <input class="form__input" id="cell" type="tel" required>
    <label class="form__label" for="cell">Phone</label>
  </div>
  <button class="btn btn_lime">Try for free</button>
</form>

Answer 1

1)

if( !el.parentElement.classList.contains('is-empty') ) {
    addRequiredError();
}

2）不知道理解的问题

3)

function addValidError() {
    let errorValidMsg = document.createElement('div');
    errorValidMsg.classList.add('input-error');
    errorValidMsg.innerHTML = '<span> Input is invalid! </span>';
    formFields.forEach(function (elem) { // <-- here formFields is not defined
}