Client-Side Validation

WebWork adds support for client-side validation on top of XWork's standard validation framework. You can enable it on a per-form basis by specifying validate="true" in the <ww:form> tag:

<ww:form name="'test'" action="'javascriptValidation'" validate="true">
  ...
</ww:form>

You must specify a name for the form in order for client-side validation.

You should also make sure you provide the correct action and namespace attributes to the <ww:form> tag. For example, if you have an Action named "submitProfile" in the "/user" namespace, you must use

<ww:form namespace="'/user'" action="'submitProfile'" validate="true">
  ...
</ww:form>

While the following will "work" in the sense that the form will function correctly, client-side validation will not:

<ww:form action="'/user/submitProfile.action'" validate="true">
  ...
</ww:form>

Of course, all the standard validation configuration steps still apply. Client-side validation uses the same validation rules as server-side validation. If server-side validation doesn't work, then client-side validation won't work either.

Upgrade Alert: This feature was introduced in WebWork 2.1. If upgrading from a previous version, make sure you are using the correct validators in validators.xml. You must be using the com.opensymphony.webwork.validators.JavaScriptRequired*Validator version of the standard XWork validators.

Building a Validator that supports client-side validation

Any validator can be extended to support client-side validation by implementing the com.opensymphony.webwork.validators.ScriptValidationAware interface:

public interface ScriptValidationAware extends FieldValidator {
    public String validationScript(Map parameters);
}

The value returned by validationScript will be executed on the client-side before the form is submitted if client-side validation is enabled. For example, the requiredstring validator has the following code:

public String validationScript(Map parameters) {
        String field = (String) parameters.get("name");
        StringBuffer js = new StringBuffer();

        js.append("value = form.elements['" + field + "'].value;\n");
        js.append("if (value == \"\") {\n");
        js.append("\talert('" + getMessage(null) + "');\n");
        js.append("\treturn '" + field + "';\n");
        js.append("}\n");
        js.append("\n");

        return js.toString();
}

Only JavaScript is supported at this time.