Published on 07/14/12 at 10:26:56 EST by GentleGiant
In the head portion of your HTML, you should create a script to do the form validation:
1.Set up the script, and make sure that it's hidden from browsers that can't handle JavaScript.
code:
<script language="Javascript"> <!-- // ignore if non-JS browser
2.This is the function call that starts the validation. It's good form to set your variables at the top of your scrypt.
code:
function Validator(theForm) { var error = "";
3.If you have drop-down elements in your forms, you should include the first option as an empty field (e.g. <option value="">choose one</option>) You can include any text you would like on the field, as long as the value is blank. Then, when you validate against it, simply look to see if the first option (the blank one) is still set, if it is, write the error message.
code:
if (theForm.dd.options[0].selected == true) { error += "Please select from the drop-down list.\n"; }
4.Text elements are the easiest to validate. Simply check to see if the value is empty. If it is, set the error message.
code:
if (theForm.words.value == "") { error += "Please fill in the text element.\n"; }
5.If you want to validate the type of data within a text field, you have to get a bit fancier. This snippet of script looks at a text box to see if it has non-numerical characters in it (the variable "digits" defines what it is looking for).
code:
var digits = "0123456789";
if (theForm.number.value == "") { error += "Please fill in a number.\n"; } for (var i = 0; i < theForm.number.value.length; i++) { temp = theForm.number.value.substring(i, i+1)
if (digits.indexOf(temp) == -1 && theForm.number.value != "") { error += "The numerical text must be a number.\n"; break; } }
1.This portion of the script shows how to validate for an email address. It is a very simple validation, it only checks to make sure that there is a @-sign and a period. People can still put in fake email addresses, but this helps reduce the wrong entries a little.
code:
if (theForm.email.value == "") { error += "You must include an accurate email address for a response.\n"; } if ((theForm.email.value.indexOf ('@',0) == -1 || theForm.email.value.indexOf ('.',0) == -1) && theForm.email.value != "") { error += "Please verify that your email address is valid."; }
2.This is the meat of the scrypt. It does two things, first it checks to see if there is an error set. If there is, it displays it as an alert message. Then it sends the return value of false, so that the form information is not sent to the server. Your error messages (set in the above if statements), all include a "\n" at the end of the line. This tells the browser to insert a carriage return (or "enter" or "new line") at the end of the line. Then, if there are several error messages they will all be on separate lines. If there are no error messages set, then the error variable will be blank (from where we set it at the top of the scrypt), and so the form information will be sent to the server to be acted upon by the CGI.