检查文本输入字段是否为空或包含数字

Question

我有一个文本输入字段，我想在 eventListener“input”上显示 2 条错误消息（当用户键入时）。

如果该字段尚未填写，则显示“请输入名字”。
仅显示“请输入有效的名字”，如果该字段 completed/when 用户正在输入，但包括数字（不应该）。

我已经完成了一半。

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

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

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

我只想在用户键入时显示第二条错误消息（而不是在他们删除文本时）。

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

谢谢！

像这样格式化逻辑的最佳方式是什么（仅使用 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>

Answer 1

这可能不是您想要的，但我在此函数中做了一些简化。没有必要让您的错误已经坐在那里等待变成 on/off 作为单独的元素。您可以只有一个错误元素并用错误消息填充它。

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>

检查文本输入字段是否为空或包含数字

Check if text input field is empty or includes a number

javascript

forms

validation

input

checkvalidity