Web Developer - Javascript

Form Verifier

Languages

Assistance

The Developer

Code

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Form Verifier</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <script language="JavaScript" type="text/javascript"> // // Form Verifier v1.0 // Some Rights Reserved // http://webdeveloper.50webs.com // function verify_form() { var isOkay= "yes"; // edit document.getElementById('req_name').style.color='#000000'; if (document.myform.name.value == "") {isOkay="no";document.getElementById('req_name').style.color='#FF0000';} document.getElementById('req_age').style.color='#000000'; if (document.myform.age.value == "") {isOkay="no";document.getElementById('req_age').style.color='#FF0000';} document.getElementById('req_country').style.color='#000000'; if (document.myform.country.value == "") {isOkay="no";document.getElementById('req_country').style.color='#FF0000';} // end editing if (isOkay == "yes") {myform.submit();} else {alert('Items in red are required items...');} } </script> <form action="javascript:alert('This form would have submitted if it had a valid action associated with it');" name="myform" id="myform"> <table border="0" cellspacing="2" cellpadding="2"> <tr> <td align="right" id="req_name">Name: </td> <td><input name="name" /></td> </tr> <tr> <td align="right" id="req_age">Age: </td> <td><input name="age" /></td> </tr> <tr> <td align="right" id="req_country">Country of origin: </td> <td><input name="country" /></td> </tr> <tr> <td align="right" colspan="2"><input name="button" type="button" onclick="verify_form();" value="Submit" /></td> </tr> </table> </form> </body> </html>

Developer Notes

To add another verification to the script add this to the table:
<tr>
<td align="right" id="req_fieldname">Text
</td>
<td><input name="fieldname"></td>
</tr>
And add this to the editable section of the javascript:
document.getElementById('req_fieldname').style.color='#000000';
if (document.formname.fieldname.value == "") {isOkay="no";document.getElementById('req_fieldname').style.color='#FF0000';}
The items in red need values. The "fieldname" is the name assigned to the textbox, the "formname" is the name assigned to the <form> tag.

Additional Resources

None Available

This work by http://webdeveloper.50webs.com is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.