我有一个名字不带空格和电话号码的表格。
我设法使表格和错误消息起作用,但是当其中没有消息时,我找不到隐藏错误信息的方法。它的工作是隐藏其他后续错误消息,但不是第一个,我是通过Chrome的调试工具发现的。
我尝试遍历所有元素以查找空白的innerHTML并将错误样式隐藏起来,但是它不起作用,找不到它。
有办法吗?这是代码:
window.onload = function () {
let form = document.getElementById("formDetails");
form.addEventListener("submit", function (event) {
let haltSubmission = false;
cleanPhoneError();
cleanNameError();
for (let i = 0; i < form.elements.length; i++) {
if (!nameCheck(form.elements[i])) {
haltSubmission = true;
} else if (!matchingPhone(form, form.elements[i])) {
haltSubmission = true;
} else if (!lengthOfPhone(form.elements[i])) {
haltSubmission = true;
}
}
if (haltSubmission) {
event.preventDefault();
}
}, false);
}
function nameCheck(formInput) {
if (formInput.id === "name") {
let value = formInput.value, error = "", letters = /^[a-zA-Z]+$/,
characters = /^[a-zA-Z0-9!@#\$%\^\&*\)\(+=._-]+$/g;
if (value === null || value === "") {
error = "This field is empty.";
}
if (value !== "") {
if (value.length < 3) {
error = "This field has less than 3 characters.";
}
if (!value.match(letters)) {
error = "Numbers detected. Please write your first name.";
}
if (!value.match(characters)) {
error = "Special characters detected. Please write your first name.";
}
}
errorMessage(formInput, error);
}
return true;
}
function matchingPhone(form, formInput) {
if (formInput.id === "phone") {
let error = "";
let phone = form.phone.value;
let retypedPhone = form.retypedphone.value;
if (phone === retypedPhone) {
return true;
} else {
error = "Phone numbers do not match.";
phoneError(error);
return false;
}
}
return true;
}
function lengthOfPhone(formInput) {
if (formInput.id === "phone") {
let value = formInput.value, error = "";
if (value === null || value === "") {
error = "This field is empty.";
phoneError(error);
return false;
} else if (value !== "") {
if (value.length < 11) {
error = "Invalid phone number, it has than 11 numbers.";
phoneError(error);
return false;
}
}
}
return true;
}
function errorMessage(selected, error) {
let elem = document.createElement("span");
elem.setAttribute("id", "nameError");
elem.setAttribute("class", "error");
let text = document.createTextNode(error);
elem.appendChild(text);
selected.parentNode.insertBefore(elem, selected.nextSibling);
return selected;
}
function phoneError(error) {
let phoneError = document.getElementById("phoneError");
phoneError.setAttribute("class", "error");
phoneError.innerHTML = error;
}
function cleanPhoneError() {
let error = document.getElementsByTagName("span");
for (let i = 0; i < error.length; i++) {
error[i].innerHTML = "";
}
}
function cleanNameError() {
let error = document.getElementById("nameError");
let errorMessage = document.getElementsByTagName("span");
for (let i = 0; i < errorMessage.length; i++) {
if (errorMessage[i].id === "nameError") {
error.style.display = "none";
}
}
}
label, button {
display: block;
margin: 10px 0 5px 0;
}
input, button {
padding: 8px;
width: 393px;
font-size: 16px;
}
body, button{
font-family: Arial, sans-serif;
}
.error{
color: #FFF;
display: block;
margin: 0 0 15px 0;
background: #990000;
padding: 5px 3px 5px 5px;
width: 405px;
line-height: 25px;
}
<section>
<h1>Form</h1>
<div id="form">
<form id="formDetails" action="confirm.html">
<div>
<label for="name">* Name:</label>
<input type="text" id="name">
</div>
<div>
<label for="phone">* Phone Number</label>
<input type="phone" id="phone">
</div>
<div>
<label for="retypedphone">* Retype Phone Number:</label>
<input type="phone" id="retypedphone">
<span id="phoneError"></span>
</div>
<div>
<button type="submit" id="submitbtn">Submit</button>
</div>
</form>
</div>
</section>