0

我有一个文本输入字段，我想在 eventListener“输入”上显示 2 条错误消息（作为用户类型）。

  1. 如果该字段尚未填写，则显示“请输入名字”。
  2. 仅当该字段已完成/当用户正在输入但包含数字时才显示“请输入有效的名字”（当它不应该时）。

我有这一半的工作。

我遇到的问题是我的验证无法正常工作。

如果我输入有效文本，则会出现第二条错误消息。如果我删除有效文本，则会出现两条错误消息。

我认为第一条错误消息工作正常。

我只希望在用户键入时出现第二条错误消息（而不是在他们删除文本时）。

实现这一目标的最佳方法是什么？

谢谢！

像这样格式化逻辑的最佳方法是什么（仅使用 JavaScript，而不是 jQuery）。

function checkFirstNameValidity(value) {
    return /^[^0-9+;:""`|!?<>().,\/\\@#$£%^&*]{1,30}$/.test(value);
};

const firstNameField = document.getElementById("n-form-first-name");
const nameError1 = document.getElementById("n-form-first-name-error-1");
const nameError2 = document.getElementById("n-form-first-name-error-2");

let isFirstNameFieldValid = "";
let isSecondNameFieldValid = "";

function validateFirstName(e) {
    e.preventDefault();
    isFirstNameFieldValid = true;

    if (!firstNameField.value) {
        // nameError.outerText = "Please enter a first name";
        nameError1.classList.add("visible");
        firstNameField.classList.add("invalid");
        nameError1.setAttribute("aria-hidden", false);
        nameError1.setAttribute("aria-invalid", true);
        return isFirstNameFieldValid = false;
    }

    else if (firstNameField.value && !checkFirstNameValidity.value) {
        // nameError2.outerText = "Please enter a valid first name";
        nameError2.classList.add("visible");
        firstNameField.classList.add("invalid");
        nameError2.setAttribute("aria-hidden", false);
        nameError2.setAttribute("aria-invalid", true);
        return isSecondNameFieldValid = false;
    }
    // return isFirstNameFieldValid;
};

function myFunction() {
    if (isFirstNameFieldValid === true) {
        console.log("isFirstNameFieldValid", isFirstNameFieldValid);
        nameError1.classList.remove("visible");
        firstNameField.classList.remove("invalid");
    } else {
        console.log("isFirstNameFieldValid", isFirstNameFieldValid);
    }

    if (isSecondNameFieldValid === true) {
        console.log("isSecondNameFieldValid", isSecondNameFieldValid);
        nameError2.classList.remove("visible");
        firstNameField.classList.remove("invalid");
    } else {
        console.log("isSecondNameFieldValid", isSecondNameFieldValid);
    }
};

firstNameField.addEventListener("input", validateFirstName);
/* First name */
#n-form-first-name-error-1, #n-form-first-name-error-2 {
    display: none;
    font-size: 0.8em;
  }

#n-form-first-name-error-1.visible  {
    display: block;
}

#n-form-first-name-error-2.visible  {
    display: block;
}

input[type=text].invalid {
    border-color: red;
}

input[type=text].valid {
    border-color: #f60;
}
    <form>
      <div class="n-form-booker-contact-details">
        <!-- Contact Fields -->
        <div class="n-form-details">
          <!-- First Name -->
          <input type="text" id="n-form-first-name" name="n-form-first-name" placeholder="First name" onfocusout="myFunction()" required>
          <label for="n-form-first-name">First name</label>
          <span class="error" id="n-form-first-name-error-1" aria-live="polite">Please enter a first name</span>
          <span class="error" id="n-form-first-name-error-2" aria-live="polite">Please enter a valid first name</span>
        </div>
    </form>

4

1 回答 1

1

这可能不是您所追求的，但我在此功能中简化了一些事情。没有必要让您的错误已经坐在那里等待作为单独的元素打开/关闭。您可以只有一个错误元素并使用错误消息填充它。

function validateFirstName(e) {
  e.preventDefault();
  nameError = document.querySelector('#n-form-first-name-error');
  nameError.style.display = "none";
  let error = '';
  if (firstNameField.value.trim() == "") {
    error = "Please enter a first name";

  } else if (!checkFirstNameValidity(firstNameField.value.trim())) {
    error = "Please enter a valid first name";
  }
  if (error) {
    nameError.style.display = "block";
    nameError.innerHTML = error
  }

}


function checkFirstNameValidity(value) {
  return /^[^0-9+;:""`|!?<>().,\/\\@#$£%^&*]{1,30}$/.test(value);
};

const firstNameField = document.getElementById("n-form-first-name");
const nameError1 = document.getElementById("n-form-first-name-error-1");
const nameError2 = document.getElementById("n-form-first-name-error-2");

let isFirstNameFieldValid = "";
let isSecondNameFieldValid = "";

function validateFirstName(e) {
  e.preventDefault();
  nameError = document.querySelector('#n-form-first-name-error');
  nameError.style.display = "none";
  let error = '';
  if (firstNameField.value.trim() == "") {
    error = "Please enter a first name";

  } else if (!checkFirstNameValidity(firstNameField.value.trim())) {
    error = "Please enter a valid first name";
  }
  if (error) {
    nameError.style.display = "block";
    nameError.innerHTML = error
  }
   

   
};

function myFunction() {
  if (isFirstNameFieldValid === true) {
    console.log("isFirstNameFieldValid", isFirstNameFieldValid);
    nameError1.classList.remove("visible");
    firstNameField.classList.remove("invalid");
  } else {
    console.log("isFirstNameFieldValid", isFirstNameFieldValid);
  }

  if (isSecondNameFieldValid === true) {
    console.log("isSecondNameFieldValid", isSecondNameFieldValid);
    nameError2.classList.remove("visible");
    firstNameField.classList.remove("invalid");
  } else {
    console.log("isSecondNameFieldValid", isSecondNameFieldValid);
  }
};

firstNameField.addEventListener("input", validateFirstName);
/* First name */

#n-form-first-name-error-1,
#n-form-first-name-error-2 {
  display: none;
  font-size: 0.8em;
}

#n-form-first-name-error-1.visible {
  display: block;
}

#n-form-first-name-error-2.visible {
  display: block;
}

input[type=text].invalid {
  border-color: red;
}

input[type=text].valid {
  border-color: #f60;
}
<form>
  <div class="n-form-booker-contact-details">
    <!-- Contact Fields -->
    <div class="n-form-details">
      <!-- First Name -->
      <input type="text" id="n-form-first-name" name="n-form-first-name" placeholder="First name" onfocusout="myFunction()" required>
      <label for="n-form-first-name">First name</label>
      <div class="error" id="n-form-first-name-error" aria-live="polite">Please enter a first name</div>

    </div>
</form>

于 2021-05-31T16:27:18.600 回答