Client-Side JavaScript Validation ColdFusion Help

Server-side validation ot the sort you have considered so far is an essential part of any effective validation scheme. However, the emergence of JavaScript as a de facto standard for client-side scripting makes it possible to perform some validation at the client end before submitting the form to the server.
This helps prevenrunnecessary round trips to the client to fix invalid data. To build full-scale validatio systems injavaScript. you must gain a strong grasp of JavaScript. To do this, consider consulting a JavaScript book such as Mastering JavaSript by James Jaworski (Sybex In .).

Because you can’t hope to learn javaecript in the midst of a chapter on form validation, you will simply learn as you build a basic client-side validation example. If you want to build full-scale, robust, client-side validation systems for. standard HTML forms, consider learning JavaScnpt in detail.”

For the purposesof this chapter, let’s turn back to our original form:

For our validation purposes, ypu will simply check whether the two required fields are filled in. It is possible, in JavaScript, to perform the more complex checks on the phone number and e-mail address formats, but for the purpose of understanding the concept, you will just look at checking-whether required fields contain data. The process of client-side valida,tion with JavaScript requires two steps:

1. Developing a validation function
2. Ensuring that the function is called before submitting the form You,will look at these in reverse order.

Calling a JavaScript Function When Submitting a Form

JavaScript extends basic HTML to include event handlers. Event handlers specify Java-Script code to execute when the user performs specific actions, including submitting a form.
To specify a function to call when submitting a form, you use the ONSUBMIT attribute of the FORMtag:

<FORM METHOD-aPOSTa ACTION-asubmit.cfma ONSUBMIT·areturn validate(this)a>

Here you use ONSUBMIT to call a function called va’l idate I which you will develop in the next section of this chapter. You pass a special keyword to the function, thi s, which effectively passes the form to the function. The only requirement of the function is that it should return True if the data is valid and can be submitted, or Fa1se if the data is not valid and the form cannot be submitted.

Developing a Validation Function

Now you need to turn to your validation function. The first thing to consider is how to include SCRIPT tags:

<SCRIPT lANGUAGE_aJavaScritl.2a>
<I- – HIDE SCRIPT FROM OTHER BROWSERS

Script goes here

II END OF SCRIPT –>
</SCRIPT>

You specify the language of the script with the LANGUAGE attribute of the SCRIPT tag. You also enclose the script inside HTML comments so that browsers that don’t support JavaScript don’t display the text of the script.

The function itself is bui’t as follows:

function validate(testform)

JavaScript validation code

The functi on keyword indicates that you are defining a function. This keyword is followed by the name of the function, followed by parameters to the function in parentheses. Here you have one parameter called testform. This means that throughout the function you can refer to the object form passed as an argument as testform. Now, you turn to the code of the function itself. The logic you will use is outlined in the following steps: .

1. Test the Namefield to see whether it is filled. If it isn’t, ask the user to fill in the field and return fal se to prevent the form from being submitted.
2. Test the Phone field to see whether it is filled. If it isn’t, ask the user to fill in the field and return fal se to prevent the form from being submitted.
3. When both Nameand Phone are filled in, return true to allow the form to be submitted.

Let’s work through this procedure. First you test the Namefield:

if (testform.Name.value — “) (
window.alert(‘Please fill in a Name.’);
return false;

‘!.he if statement tests the value of the Namefield in the form and compares it to the empty string. If it is empty, an alert dialog box like the one shown in the following graphic is displayed.

If the Namefield is not empty, then the function will move on to test the Phone field:

if (testform.Phone.value — “) (
window.alertC’Please fill in a Phone Number.’);
return false;

This code works in the same way as when you tested the Namefield. Finally, if you get past both; f statements (in other words, both fields contain text),. then you return true, allowing the form to be submitted: return true; ” The end result is the followmg complete document shown in Listing 16.5

The nice thing about JavaScript, though, is that it allows for even more interactivity. For instance, you. can use JavaScript to display a dialog box prompting the user to enter the required data, as shown in the following graphic.

This type of dialog box is achieved ,using the JavaScript prompt function:

window.promptC’Please fill in a Name.’,”);

The function returns the value entered by the user and therefore should be assigned to a variable:

testform.Name.value – window.promptC’Please fill in a Name.’,”);

Applied toyour function, the logic changes slightly:

function validate(testform) {

‘while (testform.Name.value — “) (
testform.Name.value – window.promptC’Please fill in a Name.);

while (testfonm.Phone.value ) (
testfonm. Phon.e.value – window.prompt ‘Please fill in a Phone Number);

What you are doing here is using whi 1e loops to force the user to provide the required data. For instance, the first whi 1e loop, translated into plain English, says: As long as the value in the Namefield in the form.is the empty string, continue prompting the user for a name and store the name provided in the Namefield of the form. This means that as long as the user continues to respond to the prompt by providing no data, they will continue to be prompted for data; they can’t avoid providing some information for the required fields.

Posted on November 14, 2015 in Validating From Data

Share the Story

Back to Top
Share This