表单验证检查输入值

我试图验证从一个表单使用相同的函数为每个输入值的所有输入。如果输入不为空，则应该提交表单。函数validateInputs()应该只在输入不为空的情况下返回true，但不知何故一直返回true，这样表单就会提交空输入。

addBtn.addEventListener("click", function () {
if (
validateInputs([firstName, otherNames, street, town, country]) &&
validateEmail() &&
validatePhone()
) {
id++;
//creating a new contact object
const contact = new Contact(id, firstName.value, otherNames.value, emailAddress.value, number.value, street.value, town.value, country.value);
//push to the array
ContactArray.push(contact);
//Storing contact record in local storage
localStorage.setItem("contacts", JSON.stringify(ContactArray));
//Clear input fields after submit
clearInputFields();
//Adding to list
addToList(contact);
//success message
setMessage();
}
});
const validateInputs = (inputArr) => {
inputArr.forEach(input => {
// check if is empty
if (checkIfEmpty(input)) return;
if (!checkIfOnlyLetters(input)) return;
return true
})
}

function checkIfEmpty(field) {
console.log(field.name)
if (isEmpty(field.value.trim())) {
// set field invalid
setInvalid(field, `${field.name} must not be empty`);
return true;
} else {
// set field valid
setValid(field);
return false;
}
}
function isEmpty(value) {
if (value === '') return true;
return false;
}
function setInvalid(field, message) {
field.className = 'invalid';
field.nextElementSibling.innerHTML = message;
field.nextElementSibling.style.color = error;
field.nextElementSibling.style.display = "block";
}
function setValid(field) {
field.className = 'valid';
field.nextElementSibling.innerHTML = '';
//field.nextElementSibling.style.color = green;
}
function clearAll(fields) {
fields.forEach(function (field) {
// check if is empty
field.className = "clear";
field.nextElementSibling.innerHTML = '';
})
}
//check if contains only letters
function checkIfOnlyLetters(field) {
if (/^[a-zA-Z ]+$/.test(field.value)) {
setValid(field);
return true;
} else {
setInvalid(field, `${field.name} must contain only letters`);
return false;
}
}

<div class="entry-form">
<form id="form">
<div class="form-control">
<label for="firstName">First name</label>
<input type="text" name="First name" id="firstName" />
<small>Error Message</small>
</div>
<div class="form-control">
<label for="otherNames">Other names</label>
<input type="text" name="Other names" id="otherNames" />
<small>Error Message</small>
</div>
<div class="form-control">
<label for="emailAddress">Email address</label>
<input type="text" name="Email address" id="emailAddress" onfocusout="validateEmail()"/>
<small>Error Message</small>
</div>
<div class="form-control">
<label for="contact-num">Phone number</label>
<input type="text" name="Phone number" id="contact-num" onfocusout="validatePhone()" />
<small>Error Message</small>
</div>

<div class="form-control">
<label for="street">Street</label>
<input type="text" name="Street" id="street" />
<small>Error Message</small>
</div>
<div class="form-control">
<label for="town">Town</label>
<input type="text" name="Town" id="town" />
<small>Error Message</small>
</div>
<div class="form-control">
<label for="country">Country</label>
<input type="text" name="Country" id="country" />
<small>Error Message</small>
</div>
</form>
</div>

我认为你的问题是在validateInputs功能:

const validateInputs = (inputArr) => {
inputArr.forEach(input => {
// check if is empty
if (checkIfEmpty(input)) return;
if (!checkIfOnlyLetters(input)) return;
return true
})
}

有两个问题:

函数没有返回任何值，尽管它在if语句中使用。

如果您的目标是让函数"仅在输入不为空时才返回true"，则需要检查每个输入的条件并运行一个";&&"对于所有输入。对于输入数组，我所知道的最好的方法是使用"every">

在你的例子中，我将以以下方式重写函数:

const validateInputs = (inputArr) =>
inputArr.every(input => !checkIfEmpty(input) && checkIfOnlyLetters(input));

注意，通过去掉大括号("{"one_answers"}")从函数我直接返回它的值(我想象是你的意图)使用箭头函数语法。如果你喜欢大括号:

const validateInputs = (inputArr) => {
return inputArr.every(input => !checkIfEmpty(input) && checkIfOnlyLetters(input));
}

validateInputs方法没有返回任何内容因为您返回的是回调函数而不是原始函数本身，所以您可以使用every来确保所有数组元素遵循您设置的相同规则

const validateInputs = (inputArr) => {
return inputArr.every(input => {
// check if is empty
if (checkIfEmpty(input)) return false;
if (!checkIfOnlyLetters(input)) return false;
return true;
})
}

相关内容

最新更新

热门标签：