【发布时间】：2017-12-24 05:45:04
【问题描述】：
每次我提交表单时，即使表单为空，它也会将我带到我的控制器。
它不会使用 required 验证 html 表单，并且它不会响应 javascript 验证 onsubmit。我试过提交按钮onclick仍然是同样的问题。
令人困惑的部分是输入所需的 required="required" 或 required 都不起作用。
唯一有效的验证是type="email" 和type="number"，其余的都没有。
我检查了我的 js 文件，它工作正常。
谢谢
/*----------------------VALIDATION INPUT REGISTRATION FORM---------------------*/
function validate_register_form() {
var first_name = document.forms["register_form"]["first_name"].value;
var last_name = document.forms["register_form"]["last_name"].value;
var email = document.forms["register_form"]["email"].value;
var password = document.forms["register_form"]["password"].value;
var retype_password = document.forms["register_form"]["retype_password"].value;
var mobile_number = document.forms["register_form"]["mobile_number"].value;
var gender = document.forms["register_form"]["gender"].value;
var p_b = document.forms["register_form"]["p_b"].value;
var privacy = document.forms["register_form"]["one"].value;
if(first_name == null || first_name == "") {
document.getElementById('first_name').style.borderColor = "red";
alert("First Name must be filled out");
return false;
}else{
document.getElementById('first_name').style.borderColor = "green";
}
if(last_name == null || last_name == "") {
document.getElementById('last_name').style.borderColor = "red";
alert("Last Name must be filled out");
return false;
}else{
document.getElementById('last_name').style.borderColor = "green";
}
if(email == null || email == ""){
document.getElementById('email').style.borderColor = "red";
alert("Email must be filled out");
return false;
}else{
document.getElementById('email').style.borderColor = "green";
}
if(password == null || password == ""){
document.getElementById('password').style.borderColor = "red";
alert("Password must be filled out");
return false;
}else{
document.getElementById('password').style.borderColor = "green";
}
if(retype_password == null || retype_password == ""){
document.getElementById('retype_password').style.borderColor = "red";
alert("retype password must be filled out");
return false;
}else{
document.getElementById('retype_password').style.borderColor = "green";
}
if(password != retype_password){
document.getElementById('password').style.borderColor = "red";
document.getElementById('retype_password').style.borderColor = "red";
alert("password not match");
return false;
}else{
document.getElementById('password').style.borderColor = "green";
document.getElementById('retype_password').style.borderColor = "green";
}
if(mobile_number == null || mobile_number == ""){
document.getElementById('mobile_number').style.borderColor = "red";
alert("Mobile number must be filled out");
return false;
}else{
document.getElementById('mobile_number').style.borderColor = "green";
}
if(gender == null || gender == ""){
document.getElementById('gender').style.borderColor = "red";
alert("Gender must me filled out");
return false;
}else{
document.getElementById('gender').style.borderColor = "green";
}
if(p_b == null || p_b == ""){
document.getElementById('p_b').style.borderColor = "red";
alert("Persoanl or Dealer must be filled out");
return false;
}else{
document.getElementById('p_b').style.borderColor = "green";
}
if(privacy == null || privacy == "" || privacy != "on"){
document.getElementById('privacy').style.borderColor = "red";
alert("Privacy must be checked in order to submit the form");
return false;
}else{
document.getElementById('privacy').style.borderColor = "green";
}
return true;
} // end of registration validation form registration.php <form action="controllers/core.php" method="post" onsubmit="return validate_register_form(this);">
<div class="gray-form" id="register_form">
<div class="row">
<div class="form-group col-md-6">
<label>Your Name*</label>
<input class="form-control" type="text" placeholder="Your Name" name="first_name" id="first_name" required />
</div>
<div class="form-group col-md-6">
<label>Last Name*</label>
<input class="form-control" type="text" placeholder="Last Name" name="last_name" id="last_name" required />
</div>
</div>
<div class="form-group">
<label>Email *</label>
<input class="form-control" type="email" placeholder="Enter your email" name="email" id="email" required />
</div>
<div class="form-group">
<label>Password* </label>
<input class="form-control" type="password" placeholder="Password" name="password" id="password" required />
</div>
<div class="form-group">
<label>Re-enter Password*</label>
<input class="form-control" type="password" placeholder="Password" name="retype_password" id="retype_password" required />
</div>
<div class="form-group">
<label>Mobile phone *</label>
<input class="form-control" type="number" placeholder="Enter your mobile no" id="mobile_number" name="mobile_number" required />
</div>
<div class="form-group">
<label>Gender *</label>
<div class="selected-box">
<select name="gender" id="gender" class="form-control">
<option value="">I am</option>
<option value="male">male</option>
<option value="female">Female</option>
<option value="Business">Business</option>
</select>
</div>
</div>
<div class="form-group">
<label>Personal or Dealer *</label>
<div class="selected-box">
<select name="p_b" id="p_b" class="form-control">
<option value="">I am looking for a </option>
<option value="personal">Personal Account</option>
<option value="dealer">Dealer Account</option>
</select>
</div>
</div>
<div class="form-group">
<div class="remember-checkbox">
<input type="checkbox" name="privacy" id="one" />
<label for="one">Accept our <a href="#"> privacy policy</a> and <a href="#"> customer agreement</a></label>
</div>
</div>
<button type="submit" class="button red" name="register"> Register an account </button>
<p class="link">Already have an account? please <a href="?controller=page&action=login"> login here </a></p>
</div>
</form>【问题讨论】：
标签： javascript html forms validation