2016-09-11 7 views
2

誰かが修正を手助けできるのであれば、フォームの検証がうまくいかないのはなぜかと思っていました。 フォームの入力を検証するために必要ですが、機能しませんし、送信するだけです。私はロジックの大部分を理解し、それは私が問題を発見したJavascriptフォームの検証が機能しない

<form id="regform" method="post" action="register.php"> 
       <p>Areas marked with a (*) are required by the form!</p> 
     <fieldset> 
      <legend>Account Information</legend> 
      <div class="textinput"> 
       <label for="username">User Name *</label> 
       <input id="username" type="text" name="id" /> 
      </div> 
      <div class="textinput"> 
       <label for="email">Email *</label> 
       <input id="email" type="text" name="id" /> 
      </div> 
      <div class="textinput"> 
       <label for="pwd1">Password *</label> 
       <input id="pwd1" type="password" name="pwd1" /> 
       <span id="pwdHelpBtn" class="button" >Password Rule</span> 
       <div id="pwdHelpWin" class="window" > 
        <p>Password must satisfy the following:</p> 
        <ul> 
         <li>Must be 8 characters long</li> 
         <li>Must contain atleast 1 number</li> 
         <li>Must contain atleast 1 upper & lower case letter</li> 
        </ul> 
        <span id="pwdHelpClose" class="button" >Close</span> 
       </div> 
      </div> 
      <div class="textinput"> 
       <label for="pwd2">Retype Password *</label> 
       <input id="pwd2" type="password" name="pwd2" /> 
      </div> 
     </fieldset> 
     <fieldset> 
      <legend>User Information</legend> 
      <div class="textinput"> 
       <label for="name">Name *</label> 
       <input id="name" type="text" name="name" /> 
      </div> 
      <div class="radioinput"> 
       <fieldset> 
        <legend>Gender *</legend> 
        <input id="genderm" type="radio" name="gender" value="M" /> 
        <label for="genderm">Male</label> 
        <input id="genderf" type="radio" name="gender" value="F" /> 
        <label for="genderf">Female</label>  
       </fieldset> 
      </div> 
     </fieldset> 
     <p> 
      <input id="signup" type="submit" value="Submit"/> 
     </p> 
    </form> 


function validate() 
{ 
    var pwd1 = document.getElementById("pwd1").value; 
    var pwd2 = document.getElementById("pwd2").value; 
    var username = document.getElementById("username").value; 
    var genderm = document.getElementById("genderm").checked; 
    var genderf = document.getElementById("genderf").checked; 
    var name = document.getElementById("name").value; 
    var email = document.getElementById("email").value; 

    var errmsg = ""; 
    var result = true; 
    var pattern = /^[a-zA-z ]+$/; 

    var pwd1length = pwd1.length; 

    if(email == "") 
    { 
     errmsg += "Email cannot be empty\n"; 
    } 
    else 
    { 
     if(!email.match("@")) 
     { 
      errmsg += "Please enter email address\n"; 
     } 
    } 
    if(pwd1 == "") 
    { 
     errmsg += "Please Enter a Password\n"; 
    } 
    else 
    { 
     if(pwd1length < 6) 
      errmsg += "Password must be atleast 6 characters long\n"; 
    } 

    if(pwd2 == "") 
    { 
     errmsg += "Please Re-enter a Password\n"; 
    } 
    else 
    { 
     if(pwd2 != pwd1) 
     { 
      errmsg += "Password does not match\n"; 
     } 
    } 
    if(username == "") 
    { 
     errmsg += "Please enter a User Name\n"; 
    } 
    else 
    { 
     if(!username.match (pattern)) 
     { 
      errmsg += "User Name Contains Symbols\n"; 
     } 
    } 
    if(!(genderm || genderf)) 
    { 
     errmsg += "Please Select Gender\n";  
    } 
     if(name != "") 
    { 
     errmsg += "Please enter a name\n" 
    } 
    if(errmsg != "") 
    { 
     alert (errmsg); 
     result = false; 
    } 
    return result; 
} 
function init() 
{ 
    name = document.getElementById("name"); 
    email = document.getElementById("email"); 
    pwd1 = document.getElementById("pwd1"); 
    pwd2 = document.getElementById("pwd2"); 
    username = document.getElementById("username"); 

    var regForm = document.getElementById("regform"); 

    regForm.onsubmit = validate; 

} 

window.onload = init; 
+0

デベロッパーツールコンソールにエラーがありますか?あなたは何を期待しますか?あなたは実際に何を観察していますか? –

+0

空であるか間違って入力されたフォームのビットを警告します。 – Ib311

+0

入力タグに必要な属性を追加してください。 –

答えて

1

が機能しない理由、あなたは

if(name == "") 
    { 
     errmsg += "Please enter a name\n" 
    } 

function validate() 
 
{ 
 
    var pwd1 = document.getElementById("pwd1").value; 
 
    var pwd2 = document.getElementById("pwd2").value; 
 
    var username = document.getElementById("username").value; 
 
    var genderm = document.getElementById("genderm").checked; 
 
    var genderf = document.getElementById("genderf").checked; 
 
    var name = document.getElementById("name").value; 
 
    var email = document.getElementById("email").value; 
 

 
    var errmsg = ""; 
 
    var result = true; 
 
    var pattern = /^[a-zA-z ]+$/; 
 

 
    var pwd1length = pwd1.length; 
 

 
    if(email == "") 
 
    { 
 
     errmsg += "Email cannot be empty\n"; 
 
    } 
 
    else 
 
    { 
 
     if(!email.match("@")) 
 
     { 
 
      errmsg += "Please enter email address\n"; 
 
     } 
 
    } 
 
    if(pwd1 == "") 
 
    { 
 
     errmsg += "Please Enter a Password\n"; 
 
    } 
 
    else 
 
    { 
 
     if(pwd1length < 6) 
 
      errmsg += "Password must be atleast 6 characters long\n"; 
 
    } 
 

 
    if(pwd2 == "") 
 
    { 
 
     errmsg += "Please Re-enter a Password\n"; 
 
    } 
 
    else 
 
    { 
 
     if(pwd2 != pwd1) 
 
     { 
 
      errmsg += "Password does not match\n"; 
 
     } 
 
    } 
 
    if(username == "") 
 
    { 
 
     errmsg += "Please enter a User Name\n"; 
 
    } 
 
    else 
 
    { 
 
     if(!username.match (pattern)) 
 
     { 
 
      errmsg += "User Name Contains Symbols\n"; 
 
     } 
 
    } 
 
    if(!(genderm || genderf)) 
 
    { 
 
     errmsg += "Please Select Gender\n";  
 
    } 
 
     if(name == "") 
 
    { 
 
     errmsg += "Please enter a name\n" 
 
    } 
 
    if(errmsg != "") 
 
    { 
 
     alert (errmsg); 
 
     result = false; 
 
    } 
 
    alert("SUCCESS"); 
 
    return result; 
 
} 
 
function init() 
 
{ 
 
    name = document.getElementById("name"); 
 
    email = document.getElementById("email"); 
 
    pwd1 = document.getElementById("pwd1"); 
 
    pwd2 = document.getElementById("pwd2"); 
 
    username = document.getElementById("username"); 
 

 
    var regForm = document.getElementById("regform"); 
 

 
    regForm.onsubmit = validate; 
 

 
} 
 

 
window.onload = init;
<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <form id="regform" method="post" action="register.php"> 
 
       <p>Areas marked with a (*) are required by the form!</p> 
 
     <fieldset> 
 
      <legend>Account Information</legend> 
 
      <div class="textinput"> 
 
       <label for="username">User Name *</label> 
 
       <input id="username" type="text" name="id" />Username must be a alphabet 
 
      </div> 
 
      <div class="textinput"> 
 
       <label for="email">Email *</label> 
 
       <input id="email" type="text" name="id" /> 
 
      </div> 
 
      <div class="textinput"> 
 
       <label for="pwd1">Password *</label> 
 
       <input id="pwd1" type="password" name="pwd1" /> 
 
       <span id="pwdHelpBtn" class="button" >Password Rule</span> 
 
       <div id="pwdHelpWin" class="window" > 
 
        <p>Password must satisfy the following:</p> 
 
        <ul> 
 
         <li>Must be 8 characters long</li> 
 
         <li>Must contain atleast 1 number</li> 
 
         <li>Must contain atleast 1 upper & lower case letter</li> 
 
        </ul> 
 
        <span id="pwdHelpClose" class="button" >Close</span> 
 
       </div> 
 
      </div> 
 
      <div class="textinput"> 
 
       <label for="pwd2">Retype Password *</label> 
 
       <input id="pwd2" type="password" name="pwd2" /> 
 
      </div> 
 
     </fieldset> 
 
     <fieldset> 
 
      <legend>User Information</legend> 
 
      <div class="textinput"> 
 
       <label for="name">Name *</label> 
 
       <input id="name" type="text" name="name" /> 
 
      </div> 
 
      <div class="radioinput"> 
 
       <fieldset> 
 
        <legend>Gender *</legend> 
 
        <input id="genderm" type="radio" name="gender" value="M" /> 
 
        <label for="genderm">Male</label> 
 
        <input id="genderf" type="radio" name="gender" value="F" /> 
 
        <label for="genderf">Female</label>  
 
       </fieldset> 
 
      </div> 
 
     </fieldset> 
 
     <p> 
 
      <input id="signup" type="submit" value="Submit"/> 
 
     </p> 
 
    </form> 
 
    </body> 
 

 
</html>

に次のコード if(name != "")を置き換えるためにはわかりませんしています
+0

私はエラーが二度のjavascriptを一度に読み込もうとしたことに気付きました。 – Ib311

+0

ok! – Gowtham

関連する問題