Review 1: Form Validation
In our second example we will check a form for valid inputs before it gets submitted to the server. We will first check that all the required fields are filled in, and then examine the email address to see if it looks like an email address. See the working script in action.
Step 1: When?
In this example we want to wait to do anything until the visitor has submitted the form - so we'll use the onsubmit event. There is also an added dimension to our handling of the onsubmit event that we didn't see in the rollover example. Since we want the form to only submit if everything is ok with the form we will need the event handler to return true or false. True if its ok to submit, false if it isn't.
<html> <head> <title>Simple Form Validation</title> <script type="text/javascript"> function validate() { // will return true or false } </script> </head> <body> <p>Please tell us about yourself. (Fields marked with an * are required)</p> <form method="post" action="/cgi-bin/some.cgi" onsubmit="return validate()"> <label for="name">Name*:</label> <input type="text" name="name" id="name"><br> <label for="company">Company:</label> <input type="text" name="company" id="name"><br> <label for="email">Email*:</label> <input type="text" name="email" id="name"><br> <input type="submit" value="submit form"> </form> </body>
Step 2: What?
With this form we have a two step process. First we check that each required field is filled in, and then we analyze each field that we have a standard format for to make sure it looks ok. These can be done in any order you'd like, but the one you'll see here was chosen because it fit with the sequence of messages I wanted to use.
<html> <head> <title>Simple Form Validation</title> <script type="text/javascript"> function setFocus() { } function isAnEmailAddress() { // 1+@3+ [or x@x.x] is as close as we will test } function isEmpty() { } function validate() { // will return true or false // Step 1: check that required fields are // filled in, alert and exit without // submitting if not // check that the name field is valued if (isEmpty()) { alert("Please fill in all required fields."); setFocus(); return false; } // check that the email field is valued if (isEmpty()) { alert("Please fill in all required fields."); setFocus(); return false; } // Step 2: check that the email address is // even close, alert and exit without // submitting if not if (!isAnEmailAddress("email")) { alert("The entered email address is invalid."); setFocus("email"); return false; } // if we get this far everthing is ok, so // let the form submit return; } </script> </head> <body> <p>Please tell us about yourself. (Fields marked with an * are required)</p> <form method="post" action="/cgi-bin/some.cgi" onsubmit="return validate()"> <label for="name">Name*:</label> <input type="text" name="name" id="name"><br> <label for="company">Company:</label> <input type="text" name="company" id="company"><br> <label for="email">Email*:</label> <input type="text" name="email" id="email"><br> <input type="submit" value="submit form"> </form> </body>
Step 3: How?
In the previous example the question how was simple, confined only to how to interact with the document. Like that example, interacting with form elements are a trivial task. Unlike that example, here we must go a step further and answer how we work with these elements once we get them.
<html> <head> <title>Simple Form Validation</title> <script type="text/javascript"> function setFocus(aField) { document.forms[0][aField].focus(); } function isAnEmailAddress(aTextField) { // 1+@3+ [or x@x.x] is as close as we will test if (document.forms[0][aTextField].value.length<5) { return false; } else if (document.forms[0][aTextField].value.indexOf("@") < 1) { return false; } else if (document.forms[0][aTextField].value.length - document.forms[0][aTextField].value.indexOf("@") < 4) { return false; } else { return true; } } function isEmpty(aTextField) { if ((document.forms[0][aTextField].value.length==0) || (document.forms[0][aTextField].value==null)) { return true; } else { return false; } } function validate() { // will return true or false // Step 1: check that required fields are // filled in, alert and exit without // submitting if not // check that the name field is valued if (isEmpty("name")) { alert("Please fill in all required fields."); setFocus("name"); return false; } // check that the email field is valued if (isEmpty("email")) { alert("Please fill in all required fields."); setFocus("email"); return false; } // Step 2: check that the email address is // even close, alert and exit without // submitting if not if (!isAnEmailAddress("email")) { alert("The entered email address is invalid."); setFocus("email"); return false; } // if we get this far everthing is ok, so // let the form submit return true; } </script> </head> <body> <p>Please tell us about yourself. (Fields marked with an * are required)</p> <form method="post" action="/cgi-bin/some.cgi" onsubmit="return validate()"> <label for="name">Name*:</label> <input type="text" name="name" id="name"><br> <label for="company">Company:</label> <input type="text" name="company" id="company"><br> <label for="email">Email*:</label> <input type="text" name="email" id="email"><br> <input type="submit" value="submit form"> </form> </body>
