2017-01-10 23 views
-1

問題は、送信ボタンをクリックしても、メッセージが表示された後に、検証エラーを表示するためにコードが正常に動作することです。つまり、エラーメッセージは表示されたままです)、エラーメッセージがあっても成功ページにリダイレクトされます。Javascriptフォーム検証送信ボタンの問題

は、コードを見てください:検証エラーがあるたびに

var flag = 0; 
 

 
function username() { 
 
    usrn = document.form1.txt.value; 
 
    if (usrn == "") { 
 
    document.getElementById("user").innerHTML = "Please enter a username"; 
 
    flag = 1; 
 
    } else if (usrn.length < 8) { 
 
    document.getElementById("user").innerHTML = "minimum 8 characters required"; 
 
    flag = 1; 
 
    } 
 

 
} 
 

 
function password() { 
 
    pass = document.form1.pass.value; 
 
    cpass = document.form1.cpass.value; 
 
    if (pass == "") { 
 
    document.getElementById("password").innerHTML = "Please enter a password"; 
 
    flag = 1; 
 
    } else if (pass.length < 8) { 
 
    document.getElementById("password").innerHTML = "minimum 8 characters required"; 
 
    flag = 1; 
 
    } else if (cpass == "") { 
 
    document.getElementById("cpassword").innerHTML = "Please confirm password"; 
 
    flag = 1; 
 
    } else if (cpass != pass) { 
 
    document.getElementById("cpassword").innerHTML = "passwords do not match"; 
 
    flag = 1; 
 
    } else 
 
    return; 
 
} 
 

 
function cpassword() { 
 
    cpass = document.form1.cpass.value; 
 
    pass = document.form1.pass.value; 
 
    if (cpass == "") { 
 
    document.getElementById("cpassword").innerHTML = "Please confirm password"; 
 
    flag = 1; 
 
    } else if (cpass != pass) { 
 
    document.getElementById("cpassword").innerHTML = "passwords do not match"; 
 
    flag = 1; 
 
    } else 
 
    return; 
 
} 
 

 
function email() { 
 
    email = document.form1.em.value; 
 
    if (email == "") { 
 
    document.getElementById("emailid").innerHTML = "Please enter Email-ID"; 
 
    flag = 1; 
 
    } 
 
} 
 

 
function check(form) { 
 
    flag = 0; 
 
    username(); 
 
    password(); 
 
    email(); 
 
    if (flag == 1) { 
 
    return false; 
 
    } else { 
 
    return true; 
 
    } 
 
}
<form name="form1" action="success.html" onSubmit="return check(this)" method="post"> 
 
    <table cellpadding="10"> 
 
    <tr> 
 
     <caption>FILL FORM</caption> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <label for="txt">Enter Username</label> 
 
     </td> 
 
     <td> 
 
     <input type="text" id="txt"> 
 
     <div class="error" id="user" onBlur="username()"></div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <label for="pass">Enter Password</label> 
 
     </td> 
 
     <td> 
 
     <input type="password" id="pass" onBlur="password()"> 
 
     <div class="error" id="password"></div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <label for="cpass">Confirm Password</label> 
 
     </td> 
 
     <td> 
 
     <input type="password" id="cpass" onBlur="password()"> 
 
     <div class="error" id="cpassword"></div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <label for="em">Enter Email-ID</label> 
 
     </td> 
 
     <td> 
 
     <input type="email" id="em" onBlur="email()"> 
 
     <div class="error" id="emailid"></div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan=2> 
 
     <button type="submit" class="btn">Submit</button> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</form>

はあなたに

+1

作業例を作成するために、StackOverflowのコードブロックを使用してあなたの質問を編集してください。 –

答えて

0

ここでは、使用するスニペットを示します。

コード内のいくつかの問題があります

  • が機能email()では、email変数に値を代入しています。
  • 関数スコープ内に作成されていない多くの変数があります。
  • global関数と変数を使用するよりも、コードを読みやすく保守しやすくするために、より多くの最適化を行うことができます。

var flag = 0; 
 

 
function username() { 
 
    var usrn = document.form1.txt.value; 
 
    if (usrn == "") { 
 
    document.getElementById("user").innerHTML = "Please enter a username"; 
 
    flag = 1; 
 
    } else if (usrn.length < 8) { 
 
    document.getElementById("user").innerHTML = "minimum 8 characters required"; 
 
    flag = 1; 
 
    } 
 

 
} 
 

 
function password() { 
 
    var pass = document.form1.pass.value; 
 
    var cpass = document.form1.cpass.value; 
 
    if (pass == "") { 
 
    document.getElementById("password").innerHTML = "Please enter a password"; 
 
    flag = 1; 
 
    } else if (pass.length < 8) { 
 
    document.getElementById("password").innerHTML = "minimum 8 characters required"; 
 
    flag = 1; 
 
    } else if (cpass == "") { 
 
    document.getElementById("cpassword").innerHTML = "Please confirm password"; 
 
    flag = 1; 
 
    } else if (cpass != pass) { 
 
    document.getElementById("cpassword").innerHTML = "passwords do not match"; 
 
    flag = 1; 
 
    } else 
 
    return; 
 
} 
 

 
function cpassword() { 
 
    var cpass = document.form1.cpass.value; 
 
    var pass = document.form1.pass.value; 
 
    if (cpass == "") { 
 
    document.getElementById("cpassword").innerHTML = "Please confirm password"; 
 
    flag = 1; 
 
    } else if (cpass != pass) { 
 
    document.getElementById("cpassword").innerHTML = "passwords do not match"; 
 
    flag = 1; 
 
    } else 
 
    return; 
 
} 
 

 
function email() { 
 
    var emailValue = document.form1.em.value; 
 
    if (emailValue == "") { 
 
    document.getElementById("emailid").innerHTML = "Please enter Email-ID"; 
 
    flag = 1; 
 
    } 
 
} 
 

 
function check(form) { 
 
    flag = 0; 
 
    username(); 
 
    password(); 
 
    email(); 
 
    if (flag == 1) { 
 
    console.log("False"); 
 
    return false; 
 
    } else { 
 
    console.log("True"); 
 
    return true; 
 
    } 
 
}
<form name="form1" action="success.html" onsubmit="return check(this)" method="post"> 
 
    <table cellpadding="10"> 
 
    <tr> 
 
     <caption>FILL FORM</caption> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <label for="txt">Enter Username</label> 
 
     </td> 
 
     <td> 
 
     <input type="text" id="txt"> 
 
     <div class="error" id="user" onBlur="username()"></div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <label for="pass">Enter Password</label> 
 
     </td> 
 
     <td> 
 
     <input type="password" id="pass" onBlur="password()"> 
 
     <div class="error" id="password"></div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <label for="cpass">Confirm Password</label> 
 
     </td> 
 
     <td> 
 
     <input type="password" id="cpass" onBlur="password()"> 
 
     <div class="error" id="cpassword"></div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <label for="em">Enter Email-ID</label> 
 
     </td> 
 
     <td> 
 
     <input type="email" id="em" onBlur="email()"> 
 
     <div class="error" id="emailid"></div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan=2> 
 
     <button type="submit" class="btn">Submit</button> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</form>

+0

ありがとう –

-1

に感謝します。関数からfalseを返します。これを修正する必要があります。

関連する問題