Data Verification- AJAX Tutorial

Often, it is desirable to verify the data on a page on a "Submit" button, before allowing the user to move to the next page.

This is very straightforward if there is a Java button click handler for the "Submit" button. The click handlers can be defined to have a single argument of type "java.util.Map" and they will receive all the page data along with the click notification. The page data can then be checked. E.g.

    protected void onClick( java.util.Map pageData )

    {

        String firstName = (String) pageData.get( "firstName" );

        if ( firstName.equals( "" )) {

            showMessageDialog( "Please enter first name" );

            return;

        }

        // ... Other checks

        // .. If everythihng ok, navigate

    }

If there is no Java server-side button handler, the verification needs to be handled using JavaScript mechanisms.

There is a third situation -- where there is indeed a click handler on the button, but the verification can be done on the client-side in JavaScript, and does not need any server information.

In such cases, a client-server round trip can be saved by only invoking the server-side handler if the client-side verification succeeded. This is desirable, because it increases responsiveness, and decreases server load. The trade-off is that it requires some JavaScript coding.

In Jaxcent, button click handlers (as well as any other event handlers) can have a JavaScript "verifier" attached to them. If the verifier fails, the button handler is never called by the client side.

The verifier can be a chunk of JavaScript code, though it will usually be more convenient to write a JavaScript function on the client, and just give Jaxcent the name of the verifier function.

An example of adding such a verifier is:

    myButton.addJavaScriptVerification(

        "click",    // Name of event

        "verify()", // Javascript code

        null        // Optional args.  If specifying args, do

                    // do not include "()" in the code.

    );

Now when "myButton" is clicked, the client-side JavaScript function "verify()" will be called first, all without involving the server. If this function returns false, no further processing will occur, and there will be no client-server communication. If this function returns true, only then server-side Java will be called.

An example of a verify function is:

<SCRIPT LANGUAGE="JavaScript">

<!--

function verify()

{

    var form = document.getElementsByTagName( "FORM" )[0];

    if ( form.firstName.value == "" ) {

               alert( '"First Name" is required.' );

               return false;

    }

    if ( form.lastName.value == "" ) {

               alert( '"Last Name" is required.' );

               return false;

    }

    return true;  // Proceed to server-side click handler.

}

-->

</SCRIPT>

Exercise: 

1. Add first name field verification from the server-side to http://localhost/Name.html page.
2. Add last name field verification from the client-side to http://localhost/Name.html page, using addJavaScriptVerifiation.