0
フォームが空であってもフォームを送信するたびに、私のコントローラに連れてきます。私のHTMLフォームがjsの検証とhtmlに応答しません
必須の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>
まだ2時間のために私の頭を壊す動作しませんでした –
コードであるため、問題のコードを更新し、エラーか何かがある場合は、コンソールで確認してください私が推測するスニペットでうまく動作します。 @CharbelMhanna –
ありがとうございます。私のコンソールをチェックした後に、私が交換する問題の要素IDがありました。今私はそれが完全に動作するコードを戻します。 –