Working with Client-Side JavaScript | Professional Jakarta Struts (Programmer to Programmer)

< Day Day Up >

It's very useful to validate some fields on the client with JavaScript: it saves the user a round trip to the server. The Validator Framework provides a mechanism to generate JavaScript code. The validator-rules.xml file can have JavaScript associated with each validator. The JavaScript is the client-side equivalent of the validator rule if applicable. To use the JavaScript validator routines, you need to do the following:

Add the html:javascript tag to your input JSP page.
Add the onsubmit attribute to the html:form tag.

First you must add the html:javascript tag to your input JSP page as follows:

 <head> <title>Input Form</title> <html:javascript formName="inputForm"/> </head>

Notice that you need to specify the formName. The formName will be used by the tag to generate the JavaScript validation routine dynamically. If your form name is inputForm (setup in the struts configuration file), the html:javascript will generate a JavaScript function called validateInputForm. The validateInputForm will validate the form and return true if the validation succeeded; otherwise it will return false.

Much of the JavaScript code generated by html:javascript is static. You can optimize what gets sent to the browser by setting the staticJavaScript attribute to false and including a js file that contains all of the static JavaScript. This allows the browser to cache the JavaScript routines instead of downloading them for each form in your Web application. The JavaScript routines are quite large. In your input JSP, create an HTML script tag and add a src attribute that points to the js file that contains all of the validation routines. You can even generate these routines with the html:javascript tag.

In order to tie the validateInputFormAll to the form submission, we need to add a JavaScript event handler to the form using the onsubmit attribute:

 <html:form action="inputSubmit"            onsubmit="return validateInputForm (this)">

If validateInputForm returns false, then the form submission will not occur. The validateInputForm function will display a validation error message and cause the form not to be submitted. Thus, the end user will need to handle all of the validation errors before they can submit the form to the server.

Some validator rules are too complex to easily express in JavaScript. It is up to the rules validator developer to write the JavaScript equivalent. If there is no JavaScript equivalent or if the end user has JavaScript disabled, the Java validator will run on the server instead.

A common mistake is to forget to use the return statement in the onsubmit. If you forget the return statement then both of the validators, JavaScript and Java, would execute, and you will not save the roundtrip to the server.

Canceling JavaScript validate

Adding a cancel to your form can cause problems if not handled correctly. The end user clicks on the cancel button, but instead of canceling the operation as expected, it runs the JavaScript validation routines. The generated validate[FormName] function checks to see the bCancel variable was set. If it was set, it does not perform the JavaScript validation routine as follows:

     var bCancel = false;     function validateInputFormAll(form) {         if (bCancel)            return true;         else            return validateMaxLength(form) && validateRequired(form) ...    }

Thus you need to set the bCancel variable when the cancel button is clicked as follows:

 <html:cancel onclick="bCancel=true"/>

When the cancel button is clicked, the request parameter org.apache.struts.action.CANCEL is sent (Globals.CANCEL_KEY). You can check to see if the form has been cancelled using the Action's isCancelled method in the Action's execute method as follows:

     if (this.isCancelled(request)){         System.out.println("this has been cancelled");         return mapping.findForward("home");     }

< Day Day Up >