我目前的問題是我的表單如何驗證。爲了簡單起見,我現在只在這裏驗證名字和姓氏。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
查看上面的修改 –