Form Validation

see · September 10, 2010

Please I really need help on this form validation. I am get more confuse, after put the javascript code into the html. Going to the design part nothing seems to apear, I mean the page is just blank.Here is the code.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Registration</title> <meta http-equiv="Content-Language" content="English" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="A.C.E)" /> <meta name="description" content="Design by RuudCreations" /> <meta name="keywords" content="xhtml,css,template,webdesign" /> <meta name="Robots" content="index,follow" /> <link href="ACE.css" rel="stylesheet" type="text/css" /> <style type="text/css"> </style><script LANGUAGE = "javaScript> function button_actions(){if (document.form.surname.value){alert('Enter your surname.');document.form.surname.focus();return false;}if (document.form.firstname.value){alert('Enter your First Name.');document.form.firstname.focus();return false;}if (document.form.dob.value){alert('Enter your Dste of Birth.');document.form.dob.focus();return false;}if (document.form.######.value){alert('Select your ######.');document.form.######.focus();return false;}if (document.form.category.value){alert('Select your Category.');document.form.category.focus();return false;}if (document.form.address.value){alert('Enter your Address.');document.form.address.focus();return false;}if (document.form.state.value){alert('Enter your State of Origin.');document.form.state.focus();return false;}if (document.form.email.value){alert('Enter your Email address.');document.form.email.focus();return false;}if (document.form.telephone.value){alert('Enter your Mobile Number.');document.form.telephone.focus();return false;}if (document.form.username.value){alert('Register your username.');document.form.username.focus();return false;}if (document.form.password.value){alert('Enter your Password.');document.form.password.focus();return false;}if (document.form.password.value = document.form.confirm){alert('Your Passwords dont match. Please Confirm you Password');document.form.confirm_password.focus();return false;}</SCRIPT> </head> <body> <?php include("header.php"); ?> <div id="container"> <div id="container-header"></div> <div id="container-eyecatcher"><img src="images/AceDesign.gif" alt="Ace Picture" /> <div id="container-navigation"> <ul id="navigation"> <li><a href="index.html">Home</a></li> <li><a href="aboutus.html">About Us</a></li> <li><a href="board.html">Board</a></li> <li><a href="info.html">Information</a></li> <li><a href="ranking.html">Ranking</a></li> <li><a href="calendar.html">Calendar</a></li> <li><a href="contact.html">Contact Us </a></li> </ul> </div> </div> <div id="container-content"> <div id="content"> <h1> Registration</h1> <form id="form1" method="post" action="insert.php" onsubmit="return validate_form(this);" > <table width="428">  <tr bgcolor="#CCCCCC"> <td width="133"> </td> <td width="279"> </td> </tr> <tr bgcolor="#FFFFFF"> <td><strong>SURNAME *</strong></td> <td><label> <input name="surname" type="text" id="surname" onblur="MM_validateForm('surname','','R','firstname','','R','address','','R','state','','R','email','','RisEmail','telephone','','NisNum','username','','R','password','','R');return document.MM_returnValue" size="45" maxlength="20" /> </label></td> </tr> <tr bgcolor="#CCCCCC"> <td> </td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><strong>MIDDLE-NAME</strong></td> <td><label> <input name="middlename" type="text" id="middlename" size="45" maxlength="20" /> </label></td> </tr> <tr bgcolor="#CCCCCC"> <td> </td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><strong>FIRST- NAME <span class="style3">*</span> </strong></td> <td><strong> <label></label> <input name="firstname" type="text" size="45" maxlength="20" id="firstname" /> </strong></td> </tr> <tr bgcolor="#CCCCCC"> <td> </td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><strong>DOB (yyyy-mm-dd) <span class="style3">* </span></strong></td> <td><input name="dob" type="text" id="textfield3" size="45" maxlength="10" /></td> </tr> <tr bgcolor="#CCCCCC"> <td> </td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><strong>###### <span class="style3">* </span></strong></td> <td><label> <select name="######" id="######"> <option>NONE</option> <option>MALE</option> <option>FEMALE</option> </select> </label></td> </tr> <tr bgcolor="#CCCCCC"> <td> </td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><strong>CATEGORY <span class="style3">*</span></strong></td> <td><label> <select name="Category" id="Category"> <option>NONE</option> <option>PROFESSIONAL</option> <option>UNDER 18</option> <option>UNDER 16</option> <option>UNDER 14</option> <option>UNDER 12</option> </select> </label></td> </tr> <tr bgcolor="#CCCCCC"> <td> </td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><strong>ADDRESS * </strong></td> <td><input name="address" type="text" id="address" size="45" maxlength="50" /></td> </tr> <tr bgcolor="#CCCCCC"> <td> </td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><strong>ADDRESS 2 </strong></td> <td><input name="Address2" type="text" id="Address2" size="45" maxlength="50" /></td> </tr> <tr bgcolor="#CCCCCC"> <td> </td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><strong>STATE *</strong></td> <td><input name="state" type="text" id="state" size="45" maxlength="20" /></td> </tr> <tr bgcolor="#CCCCCC"> <td> </td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><strong>EMAIL *</strong></td> <td><input name="email" type="text" id="email" size="45" maxlength="50" /></td> </tr> <tr bgcolor="#CCCCCC"> <td> </td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><strong>TELEPHONE *</strong></td> <td><label> <input name="telephone" type="text" id="telephone" size="45" maxlength="20" /> </label></td> </tr> <tr bgcolor="#CCCCCC"> <td> </td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><strong>USERNAME * </strong></td> <td><label> <input name="username" type="text" id="username" size="45" maxlength="50" /> </label></td> </tr> <tr bgcolor="#CCCCCC"> <td> </td> <td> </td> </tr ><tr bgcolor="#FFFFFF"> <td><strong>PASSWORD * </strong></td> <td><label> <input name="password" type="password" id="password" size="45" maxlength="50" /> </label></td> </tr> <tr bgcolor="#CCCCCC"> <td height="23"></td> <td></td> </tr> <tr bgcolor="#FFFFFF"> <td height="23"><strong>RE-PASSWORD *</strong></td> <td><label> <input name="password" type="password" id="password" size="45" maxlength="50" /> </label></td> </tr> <tr bgcolor="#CCCCCC"> <td height="23"></td> <td></td> </tr> </table> <p align="center"> <label> <input type="submit" name="Submit" value="Submit" onclick="button_action" /> <span class="style4"> .</span> </label> <label> <input name="Reset" type="reset" id="Reset" value="Reset" /> </label> </p> <p><span class="style8"><strong>Notice</strong>:</span><span class="style13"> Payment must be made to NTF PIN account before registration to obtain your PIN. This will enable players to send entries for tournament online. Players are expected to pay a fee of five thousand naira (=N=5,000.00) yearly to renew the PIN. Players must ensure to make payment in their names. </span></p> <p><span class="style13">Guaranty Trust Bank.... Account Name: NTF PIN Account Number: XXXX XXXX XXXX</span> </p> <div align="center" class="style5"></div> </form> </div> <div id="border"> <h4><img src="images/pics4.gif" alt="" width="187" height="288" /></h4> <hr /> <hr /> <h4> </h4> <p> </p> </div> </div> <div id="container-footer"> <div id="footer"></div> <div align="center" class="style1">copyright©2010 Nigeria Tennis Federation . All right reserved </div> <div align="center" class="style2">webmaster: sundayessien@yahoo.com</div> </div> </div> </body></html>

thescientist · September 10, 2010

geez...do you validate your code? Have you tried commenting out bits and pieces of it to find out what's causing the blank page? No offense, but you have to be somewhat proactive in this, as opposed to just splashing a bunch of code on the page and saying it doesn't work.what's with the hashes? You realize that this = is an assignment operator, and that it's not comparing anything. On top of that, you still have the MM_validate form thing in there on blur of one of your input elements.

see · September 10, 2010

geez...do you validate your code? Have you tried commenting out bits and pieces of it to find out what's causing the blank page? No offense, but you have to be somewhat proactive in this, as opposed to just splashing a bunch of code on the page and saying it doesn't work.what's with the hashes? You realize that this = is an assignment operator, and that it's not comparing anything. On top of that, you still have the MM_validate form thing in there on blur of one of your input elements.

Please I really dont get/understand what you are trying to say concerning my validation code

justsomeguy · September 10, 2010

If you ran your page through a validator it would help tell you what the problems are. There's a problem on this line, for example:<script LANGUAGE = "javaScript>You're missing a quote at the end. Even so, you shouldn't use "language" any more, it's old. Use type instead:<script type="text/javascript">Other than that, it's better to use document.getElementById to find your fields. The other way is also old. You have a field like this with an ID:<input name="surname" type="text" id="surname" ...So instead of doing this:

if (document.form.surname.value){alert('Enter your surname.');document.form.surname.focus();return false;}

It's better to do something like this:

field = document.getElementById('surname');if (field.value){  alert('Enter your surname.');  field.focus();  return false;}

There's a problem there, though. Your if statement just checks the value:if (document.form.surname.value){That means the alert will only show if the field is not empty, it will not show if the field is empty. Check for an empty value instead:if (field.value == '')You're also a little confused about what you're trying to do. This is what your function is called:function button_actions()You have a function called button_actions. But then you have this on the page:<form id="form1" method="post" action="insert.php" onsubmit="return validate_form(this);" >What is validate_form? And here:<input name="surname" type="text" id="surname" onblur="MM_validateForm('surname','','R','firstname','','R','address','','R','state','','R','email','','RisEmail','telephone','','NisNum','username','','R','password','','R');return document.MM_returnValue" size="45" maxlength="20" />What is MM_validateForm? You also have this on your button:<input type="submit" name="Submit" value="Submit" onclick="button_action" />The function name is misspelled (button_actions, not button_action), but that's not the right way to use it. If you want the function to run when you click the button, then you would do this:<input type="submit" name="Submit" value="Submit" onclick="return button_actions();" />You also have PHP code on your page. Does your server run PHP?

what's with the hashes?

I assume the forum is censoring the other word for "gender".

thescientist · September 11, 2010

Please I really dont get/understand what you are trying to say concerning my validation code

at the very least if your functions doesn't work, it should still at least render the page. Why not make sure it renders first without the javascript and then add in the pieces one at a time and check to see that each piece by itself is working (known as unit testing) and slowly build up the validation function bit by bit.

Sign In

Form Validation

Recommended Posts

see

Link to comment

Share on other sites

thescientist

Link to comment

Share on other sites

see

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

thescientist

Link to comment

Share on other sites

Archived

Browse

Activity