The form verifier allows the user to see what fields still need a value, but also will not submit the form until the required items are complete.
<?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>
