Page History

AJAX-based client side validation improves upon Pure JavaScript Client Side Validation by using a combination of JavaScript, DOM manipulation, and remote server communication. Unlike the pure client side implementation, AJAX-based validation communicates with the server. This means all your validation rules that worked when submitting a form will still work within the browser.

The validation occurs on each onblur event for each form element. As each user types in some values and moves to the next form element, the value (and all other values previously entered) will be sent to the server for validation. The entire validation stack is run, including visitor validators and your action's validate() method.

If there is an error, like the pure implementation, the HTML and DOM will be updated immediately.

For an example of this, see AJAX Validation.

Asynchronous Client side form validation in WW2.2 is super easy, and super cool.

Here is what I learned while getting it running.

1) Have WW Validation working already. Go for it, use something cool like a nested validator with a email validation rule.
2) You need the latest DWR jar in WEB-INF/lib.
3) Add this code to your web.xml

    <servlet>
        <servlet-name>dwr</servlet-name>
        <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>dwr</servlet-name>
        <url-pattern>/dwr/*</url-pattern>
    </servlet-mapping>

4) Update an existing form. Depending on how extensively you used WW form controls this step might take a few moments. The controls all need to be generated via WW tags. No being lazy and just using <form name="xxx". Ill explain why this is in a moment. You will need to follow these rules to stay on the happy path:

• <ww:form must have an id element.
• Again use only ww: tags
• To turn client side validation on, set the validate="true" attribute
• Well I guess thats it.
  Here is a sample form:

  Code Block

  <ww:form id="input_form" action="'SaveUser.action'" method="post" validate="true"> <ww:textfield label="'First Name'" name="'bo.firstName'" size="20" required="true"/> <ww:textfield label="'Last Name'" name="'bo.lastName'" size="20" required="true"/> <ww:textfield label="'Email'" name="'bo.emailAddress'" size="20" required="true"/> <ww:submit name="'submit'" value="'Save'" cssClass="'primary'"/> </ww:form>

  See what WW generates for you. This is why its critical to use all the WW tags. There are two things happening here. In the ww:form tag ww includes all the JavaScript libs. And secondly, notice how the ids for all the child elements got filled in based on the name of the parent form? Thats the second half of the magic. WWs JavaScript uses these ids to getElementById.

<script src="/agility/webwork/validationClient.js"></script>
<script src="/agility/dwr/interface/validator.js"></script>
<script src="/agility/dwr/engine.js"></script>
<script src="/agility/webwork/template/xhtml/validation.js"></script>
<form namespace="" id="input_form" name="SubmitUser" action="/agility/SubmitUser.action">

<p>
<label for="input_form_bo.firstName" class="label"><span class="required">*</span>First Name:</label>
<input name="bo.firstName" size="20" value="admin" id="input_form_bo.firstName" onblur="validate(this);" type="text">
</p>
<input type="submit" name="submit" value="Save" class="primary"/>
</form>
<p>

5) Thats about it. You should be off to the races using asynchronous client side validation!!!