我正在尝试使用纯 JavaScript 创建表单验证。 我有两个要验证的元素，一个选择选项和一个复选框，但我无法使选择选项起作用。
第一次尝试，请耐心等待:
var registrationForm, elSelectGender, elGenderHint, elTerms, elTermsHint; // Declare variables
registrationForm = document.getElementById('registrationForm'); // Store elements
elSelectGender = document.getElementById('gender');
elGenderHint = document.getElementById('genderHint');
elTerms = document.getElementById('terms');
elTermsHint = document.getElementById('termsHint');
elName = document.getElementById('firstName');
elNameHint = document.getElementById('nameHint');
function checkName(event) {
if (elSelectGender.valueOf() == null) { // If name not entered
elNameHint.innerHTML = 'You must insert your name.'; // Show message
event.preventDefault(); // Don't submit form
}
}
function checkGender(event) {
if (elSelectGender.valueOf() == 'Select an option:') { // If gender not selected
elGenderHint.innerHTML = 'You must select a gender.'; // Show message
event.preventDefault(); // Don't submit form
}
}
function checkTerms(event) {
if (!elTerms.checked) { // If check-box ticked
elTermsHint.innerHTML = 'You must agree to the terms.'; // Show message
event.preventDefault(); // Don't submit form
}
}
//Create event listeners: submit calls checkTerms(), change calls packageHint()
registrationForm.addEventListener('submit', checkName, false);
registrationForm.addEventListener('submit', checkGender, false);
registrationForm.addEventListener('submit', checkTerms, false);<!DOCTYPE HTML>
<html>
<form id="registrationForm" name="registrationForm" method="post" action="example.html">
<div>
<label for="firstName" class="input"> Name: </label>
<input name="firstName" class="form-control" id="firstName" placeholder="First Name" type="text" />
<div id="nameHint" class="warning"></div>
</div>
<div>
<label for="gender" class="selectbox"> Gender: </label>
<select id="gender">
<option value="Select an option:">Select an option:</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="I prefer not to say">I prefer not to say</option>
</select>
<div id="genderHint" class="warning"></div>
</div>
<div>
<input type="checkbox" id="terms" />
<label for="terms" class="checkbox"> Check to agree to terms & conditions</label>
<div id="termsHint" class="warning"></div>
</div>
<input class="btn btn-primary" id="submitButton" type="submit" value="Sign up for G Holiday" />
</form>
</html>我希望对所有三个元素都有警告消息和验证。如果三个元素之一未通过验证，则不应转到下一页。 出于某种原因，它仅适用于复选框，其他两个元素将被忽略。
最佳答案
我会将选择和输入包装到 label 中，并使用 CSS 显示 .warning 错误消息。
我会使用 Array.prototype.some() 检查我的任何元素是否未通过检查，而不是使用 ev.preventDefault() 并显示警告:
const EL = sel => document.querySelector(sel),
warning = (el, err) => [err, el.closest('label').classList.toggle('is-error', err)][0],
noValue = el => warning(el, !el.value.trim()),
noCheck = el => warning(el, !el.checked),
checkFormRegistration = ev => {
const isSomeInvalid = [
noValue(EL('#firstName')),
noValue(EL('#gender')),
noCheck(EL('#terms'))
].some(b => b);
if (isSomeInvalid) ev.preventDefault();
};
EL('#registrationForm').addEventListener('submit', checkFormRegistration);label.is-error > *{
outline: 1px solid red;
outline-offset: -1px;
}
label + .warning {
display: none;
color: red;
}
label.is-error + .warning {
display: block;
}<form id="registrationForm" name="registrationForm" method="post" action="example.html">
<div>
<label> Name:
<input name="firstName" class="form-control" id="firstName" placeholder="First Name" type="text">
</label>
<div class="warning">Please, enter a name</div>
</div>
<div>
<label> Gender:
<select id="gender">
<option value="">Select an option:</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="I prefer not to say">I prefer not to say</option>
</select>
</label>
<div class="warning">Please, select a gender</div>
</div>
<div>
<label>
<input type="checkbox" id="terms">
Check to agree to terms & conditions
</label>
<div class="warning">You must agree to the terms</div>
</div>
<input class="btn btn-primary" id="submitButton" type="submit" value="Sign up for G Holiday">
</form>关于javascript - 使用 JavaScript 验证表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55677374/