我目前的问题是我的表单如何验证。为了简单起见,我现在只在这里验证名字和姓氏。Javascript/HTML表单验证问题
比方说,不输入他们的名字或姓氏。它只显示错误信息“(请输入你的名字)”,它不显示“(请输入你的姓氏)”。
比方说,输入他们的名字而不是他们的姓氏,它会显示“(请输入您的姓氏)”。
有没有办法解决这个问题,例如,如果某人不输入他们的名字和姓氏,它会显示两个错误消息?
的JavaScript:
function validateAll() {
//Inputs
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
//Errors
var firstNameError = document.getElementById("firstNameError");
var lastNameError = document.getElementById("lastNameError");
if (
validateFirstName(firstName, firstNameError) == true &&
validateLastName(lastName, lastNameError) == true
) {
return true;
} else return false;
}
function validateFirstName(firstName, firstNameError) {
if (firstName == "") {
firstNameError.firstChild.nodeValue = "(Please Enter Your First Name)";
return false;
} else {
firstNameError.firstChild.nodeValue = "";
return true;
}
}
function validateLastName(lastName, lastNameError) {
if (lastName == "") {
lastNameError.firstChild.nodeValue = "(Please Enter Your Last Name)";
return false;
} else {
lastNameError.firstChild.nodeValue = "";
return true;
}
}
HTML:
<form name="registrationForm" id="registrationForm" onSubmit="return validateAll()" action="AddUserDetails">
<div class="form-group">
<label for="firstName">First Name</label>
<span id="firstNameError" class="error">*</span>
<input type="text" class="form-control" id="firstName" name="firstName">
</div>
<div class="form-group">
<label for="lastName">Second Name</label>
<span id="lastNameError" class="error">*</span>
<input type="text" class="form-control" id="lastName" name="lastName">
</div>
<div class="form-group">
<label for="phoneNumber">Phone Number</label>
<span id="phoneNumberError" class="error">*</span>
<input type="text" class="form-control" id="phoneNumber" name="phoneNumber">
</div>
<div class="form-group">
<label for="eMail">E-Mail</label>
<span id="eMailError" class="error">*</span>
<input type="text" class="form-control" id="eMail" name="eMail">
</div>
<div class="form-group">
<label for="eMailConfirmation">Confirm E-Mail</label>
<span id="eMailConfirmationError" class="error">*</span>
<input type="text" class="form-control" id="eMailConfirmation" name="eMailConfirmation">
</div>
<div class="form-group">
<label for="password">Password</label>
<span id="passwordError" class="error">*</span>
<input type="password" class="form-control" id="password" name="password">
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary"><i class="fa fa-user-md"></i> Register</button>
</div>
</form>
你会建议我把它分成两个if语句,还是应该以完全不同的方式完成整个事情? – Aontaigh
查看上面的修改 –