Validating Text Element Data Prior to Submitting Form Results
Validating a single-line or multiline text field prior to submitting form results to the Web server typically involves making sure the visitor has entered something into the field. Suppose, for example, that your Web page HTML included the following form definition that asks the site visitor to enter a name and an e-mail address:
<form name="ExampleForm" action="http://NVBizNet2.com/_scripts/_pl/FrmScrpt.CGI" method="POST"
enctype="application/x-www-form-urlencoded"> First Name:
<input type="text" name="FirstName" id="FN" size="15"><br> Last Name:
<input type="text" name="LastName" id="LN" size="20"><br>
E-mail: <input type="text" name="Email" id="EM" size="30"><br>
<p><input type="submit" value="Submit">
<input type="reset"></p>
</form>
To make sure that the visitor does not skip over the e-mail field without entering something into it, insert a JavaScript script that “validates” the form’s text field enclosed within a set of start and end script tags (<script></script>) in the Web page HTML. Although you can place scripts anywhere in the Web page definition, place your form validation functions right after the start Web page <body> tag at the beginning of the Web page HTML. (Placing all your scripts in the same area of the Web page HTML makes them easier to find when you want to see the code behind references to the scripts in the Web page HTML tags.). Thus, to make sure the visitor enters something into the e-mail text field in the current example, your Web page HTML will start something like this:
<html><body>
<script language="JavaScript">
<!--
function ValidateForm(Form)
{
if (Form.Email.value == "")
{
alert("Please enter a value for the \"E-mail\" field."); Form.Email.focus();
return(false);
}
else return(true);
}
// -->
</script>
The start and end comment tags (<!-- and -->) that enclose the JavaScript have no effect on the script in Web browsers that are able to read and execute JavaScript. However, the start and end comment tags prevent Web browsers that do not support scripting languages from displaying the JavaScript code onscreen with other Web page text content.
The first line in the JavaScript defines the ValidateForm function, so you can refer to it (that is, call it as a function that returns a value) elsewhere in the Web page HTML. The second and third lines of code check the value of the form field named Email and display the Alert message box shown here, if the Email text field is blank when the Web browser executes the script.
If the Email field is blank, the fourth and fifth lines in the JavaScript (which follow the ALERT method) tell the Web browser to move the cursor (that is, the form’s focus) to the “Email” text input field and return a value of False to the HTML tag that “called” the function.
To have the Web browser execute the ValidateForm() function when the visitor clicks Submit, add the onSubmit attribute to the form’s <form> tag such that the tag reads as follows:
<form name="ExampleForm" onSubmit="return ValidateForm(ExampleForm)" action="http://NVBizNet2.com/_scripts/_pl/FrmScrpt.CGI" method="POST"
enctype="application/x-www-form-urlencoded">
Make sure you do not omit the “return” that precedes the ValidateForm() function call; otherwise, the Web browser will still submit the form results to the Web server even if the ValidateForm() function returns a value of False, which indicates that there is a problem with the form results.
When written correctly (as in the current example), the onSubmit attribute tells the Web browser to execute a JavaScript function to validate the form results after the visitor clicks Submit. If the function returns True, the Web browser will submit the form results to the URL specified by the method attribute in the <form> tag. Conversely, if the JavaScript function returns a value of False, the Web browser will return to form data entry, placing the cursor in the form element specified by the focus method in the JavaScript.