2016-12-29 132 views
0

在JavaScript验证我必须点击提交按钮两次

function validaterole(role) 
 
{ 
 
    if(role.value==="select") 
 
    { 
 
     var x="select your role"; 
 
     document.getElementById("role").innerHTML=x; 
 
    } 
 
    else 
 
    { 
 
     document.getElementById("role").innerHTML=""; 
 
     return true; 
 
    } 
 
} 
 

 
function validatepwd(pwd) 
 
{ 
 
    //var pwdchecker=/^([A-Za-z0-9]{8,8})$/;    
 
    //var pwdchecker=/^([A-Z]{1,}[a-z]{1,}[0-9]{1,}(@|#|$))$/; 
 
    var pwdchecker=/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[[email protected]#]).{8,12}$/; 
 

 
    if(pwd.value===""){ 
 
     x="pls enter your password"; 
 
     document.getElementById("pw").innerHTML=x; 
 
     return false; 
 
    } 
 
    else if(pwd.value.length < 7 || pwd.value.length > 12){ 
 
     x="password length should be 8 to 12"; 
 
     document.getElementById("pw").innerHTML=x; 
 
     return false; 
 
    } 
 
    else if(pwd.value.match(pwdchecker)) 
 
    { 
 
     x=""; 
 
     document.getElementById("pw").innerHTML=x; 
 
     return true; 
 
    } 
 
    else 
 
    { 
 
     x="password should contain atleast one<br>uppercase and one lowercase<br> alhabets and one number<br>and one special characters([email protected]#)"; 
 
     document.getElementById("pw").innerHTML=x; 
 
     return false; 
 
    } 
 
} 
 

 
function validateemail(email) 
 
{ 
 
    var emailchecker=/^([A-Za-z0-9.]{5,30})\@([A-Za-z]{2,13})\.([A-Za-z]{2,4})$/; 
 
    if(email.value==="") 
 
    { 
 
     x="pls enter your email"; 
 
     document.getElementById("em").innerHTML=x; 
 
     return false; 
 
    } 
 
    else if(email.value.match(emailchecker)){ 
 
     x=""; 
 
     document.getElementById("em").innerHTML=x; 
 
     return true; 
 
    } 
 
    else{ 
 
     x="Invalid email"; 
 
     document.getElementById("em").innerHTML=x; 
 
     return false; 
 
    } 
 
}
<form action="login" name="log" method="post" onsubmit="return (validateemail(document.log.email) && validatepwd(document.log.pwd) && validaterole(document.log.role))"> 
 

 
    <a href="Registration.jsp"><p align="right">New User</p></a> 
 

 
    <table align="center"> 
 
     <tr> 
 
      <td>E-Mail 
 
      </td> 
 
      <td><input type="text" name="email" onblur="validateemail(document.log.email)"></td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2" align="right"><span id="em"></span></td> 
 
     </tr> 
 
     <tr> 
 
      <td>PassWord</td> 
 
      <td><input type="password" name="pwd" onblur="validatepwd(document.log.pwd)"></td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2" align="right"><span id="pw"></span></td> 
 
     </tr> 
 
     <tr> 
 
      <td>Role</td> 
 
      <td> 
 
       <select id="sel" name="role" onblur="validaterole(document.log.role)"> 
 
        <option value="select">Select</option> 
 
       <option value="principal">Principal</option> 
 
       <option value="hod">Hod</option> 
 
       <option value="staff">Staff</option> 
 
       <option value="student">Student</option> 
 
      </select> 
 
      </td> 
 
     <tr> 
 
      <td></td> 
 
      <td align="left"><span id="role"></span></td> 
 
     </tr> 
 
     </tr> 
 
     <tr> 
 
      <td></td> 
 
      <td><input type="submit" value="Log In"></td> 
 
     </tr> 
 
    </table> 
 
</form> 
 

 

 

我的第二个问题与onfocusout在或onblur事件,每当我点击提交按钮没有提交表单,并在第二次点击,表单提交。 。 我需要在单击时做到这一点。 hlp我如果你有一个解决方案

+0

尝试将所有三个函数调用为单个函数。将该函数用于提交点击事件。我可以解决您的问题 –

+0

nope我需要验证单个文本框以及使用提交按钮 –

+0

看起来不错我在这里检查https ://plnkr.co/edit/fuopiqYU3uJZBBIhAlLe?p = preview – Deep

回答

0

使用提交按钮上的单一功能,并调用该功能的其他功能。

+0

问题是跨度标记我给这个跨度单元的宽度..works great –