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

Question

我有一个文本输入字段，我想在其中显示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>

Answer 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>