javascript - form validation. Radio button check doesn't work and some other problems in form -
<!doctype html> <html> <head> <title>signup</title> <link rel="stylesheet" href="style/style.css"> <style type="text/css"> #signup{ margin-left:200px; margin-top:90px; } #signup input{ margin:2px 0px 20px 10px; background-color:#eaeaea; } #signup button{ font-size:16px; margin-top:50px; margin-left:150px; width:100px; height:31px; background-color:#333333; text-align:center; color:#fff; } </style> <script> function signup() { var x1=document.forms["signupform"]["username"].value; var x2=document.forms["signupform"]["email"].value; var x3=document.forms["signupform"]["password1"].value; var x4=document.forms["signupform"]["password2"].value; var x5=""; /* document.forms[0].radios array filled radio buttons. loop through of them , see if checked. if 1 is, transfer value of radio button user_input.*/ var atpos=x2.indexof("@"); var dotpos=x2.lastindexof("."); if(document.getelementbyid('gender_male').checked) { x5="male"; }else if(document.getelementbyid('gender_female').checked) { x5="female"; } if (x1==null || x1==""|| x2==null || x2==""|| x3==null || x3=="" || x4==null || x4=="" || x5=="") { alert("please fill required fields"); return false; } else if (x3!=x4){ alert("psswords not match"); return false; } else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x2.length) { alert("not valid e-mail address"); return false; } else{ return document.forms[0].action = "signupdata.php"; } } </script> </head> <body> <?php include_once("template_pagetop.php"); ?> <div id=signup> <h2>sign here </h2> <form method="post" name="signupform" > <table border="0" cellpadding="2"> <tr> <td >username:*</td> <td ><input type="text" name="username" size="30" ></td> </tr> <tr> <td>email:*</td> <td><input type="text" name="email" size="30" ></td> </tr> <tr> <td>password:*</td> <td><input type="password" name="password1" size="30" ></td> </tr> <tr> <td>confirm password:*</td> <td><input type="password" name="password2" size="30" ></td> </tr> <tr> <td>gender:*</td> <td ><input type="radio" name="gender" value="male" id="gender_male">male<br/> <input type="radio" name="gender" value="female" id="gender_female">female</td> </tr> <tr> <td><button onclick= "signup()" >signup</button> </td> <td><button type="reset" >cancel</button> </td> </tr> </table> </form> </div> </body> </html>
there several things need improve in form.
- if there no errors how make signup page visible.(after clicking signup mine goes blank signupdata.php page.how stop this)
- how check if radio button (gender) has been filled.my form desn't check that.
- when field not filled , after error message pops filled areas (including correctly filled) vanishes.is there way stop , keep correctly filled data.
i new web design.any please.
if radio button mandatory ckeck default 1 of radio buttons.
<input type="radio" name="gender" checked value="male" >male<br/> <input type="radio" name="gender" value="female">female</td>
Comments
Post a Comment