Description
The following is describes how to do simple ajax validation in webwork.
 | This requires DWR servlet being setup, dojo and the ajax theme being used. |
| In the Ajax theme, dwr is used for normal validation while dojo everything else (widgets, XHR, browser JS events etc.) |
| In order for validation to function properly it is advised to used standard WebWork Tags. |
| A description of the internal working of Ajax Validation using DWR could be found [here]. |
Setup DWR
DWR could be setup by having the following dwr configuration (dwr.xml) at /WEB-INF/ directory. If it needs to be in other places, refer to http://getahead.ltd.uk/dwr/
for more information.
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
"http://getahead.org/dwr//dwr20.dtd">
<dwr>
<allow>
<create creator="new" javascript="validator">
<param name="class" value="com.opensymphony.webwork.validators.DWRValidator"/>
</create>
<convert converter="bean" match="com.opensymphony.xwork.ValidationAwareSupport"/>
<create creator="new" javascript="dwraction">
<param name="class" value="org.directwebremoting.webwork.DWRAction" />
</create>
<convert converter="bean" match="org.directwebremoting.webwork.ActionDefinition"/>
<convert converter="bean" match="org.directwebremoting.webwork.AjaxResult" />
<convert converter="bean" match="com.opensymphony.xwork.ActionSupport" />
</allow>
<signatures>
<![CDATA[
import java.util.Map;
import com.opensymphony.webwork.validators.DWRValidator;
import org.directwebremoting.webwork.ActionDefinition;
import org.directwebremoting.webwork.DWRAction;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletContext;
DWRValidator.doPost(String, String, Map<String, String>);
DWRAction.execute(ActionDefinition, Map<String, String>, HttpServletRequest, HttpServletResponse, ServletContext);
]]>
</signatures>
</dwr>
A DWRServlet need to be registered with the web application as well. The following shows a typical web.xml with DWRSerlvet.
<servlet>
<servlet-name>dwr</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>org.directwebremoting.extend.AccessControl</param-name>
<param-value>com.opensymphony.webwork.dwr.WebWorkDwrAccessControl</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
Step 1
Create the jsp page. Note the <ww:head ...> tag is used to set the theme which will put in necesary dojo sripts etc. See ajax's theme head.ftl for more information.
<html>
<head>
<title>Validation - Basic</title>
<ww:head theme="ajax" debug="true"/>
</head>
<body>
<p>
This quiz (ajax) example is customized to use 2 locale, namely en_US and cn_ZH, as I don't know
how to write / read chinese, the chinese resource bundle is just like the english but prefixed with (cn)
</p>
<ul>
<li>
<ww:url id="url" namespace="/validation" action="quizAjax" method="input">
<ww:param name="request_locale" value="%{'zh_CN'}" />
</ww:url>
To swich to use the chinese resource bundle click <ww:a href="%{#url}">here</ww:a>.
</li>
<li>
<ww:url id="url" namespace="/validation" action="quizAjax" method="input">
<ww:param name="request_locale" value="%{'en_US'}" />
</ww:url>
To swich to use the english resource bundle click <ww:a href="%{#url}">here</ww:a>.
</li>
</ul>
<p>
The following form uses the labelposition="left"
<ww:form id="f1" action="quizAjax" namespace="/validation" method="post" validate="true" theme="ajax">
<ww:textfield label="Name" name="name" labelposition="left" />
<ww:textfield label="Age" name="age" labelposition="left" />
<ww:textfield label="Favorite color" name="answer" labelposition="left" />
<ww:submit id="b1" />
</ww:form>
</p>
<p>
The following form uses the labelposition="top"
<ww:form id="f2" action="quizAjax" namespace="/validation" method="post" validate="true" theme="ajax">
<ww:textfield label="Name" name="name" labelposition="top" />
<ww:textfield label="Age" name="age" labelposition="top" />
<ww:textfield label="Favorite color" name="answer" labelposition="top" />
<ww:submit id="b2"/>
</ww:form>
</p>
</body>
</html>
Step 2
Create the action class
public class QuizAction extends ActionSupport {
int minAge = 13;
int maxAge = 19;
String name;
int age;
String answer;
public int getMinAge() {
return minAge;
}
public void setMinAge(int minAge) {
this.minAge = minAge;
}
public int getMaxAge() {
return maxAge;
}
public void setMaxAge(int maxAge) {
this.maxAge = maxAge;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getAnswer() {
return answer;
}
public void setAnswer(String answer) {
this.answer = answer;
}
}
Step 3
Create the validation.xml
<!--
Add the following DOCTYPE declaration as first line of your XXX-validation.xml file:
<!DOCTYPE validators PUBLIC
"-//OpenSymphony Group//XWork Validator 1.0.3//EN"
"http://www.opensymphony.com/xwork/xwork-validator-1.0.3.dtd">
-->
<validators>
<field name="name">
<field-validator type="requiredstring">
<message key="validation.name.required" />
</field-validator>
</field>
<field name="age">
<field-validator type="int">
<param name="min">10</param>
<param name="max">19</param>
<message key="validation.age.invalid">
<param name="0">'Contestant'</param>
<param name="1">minAge</param>
<param name="2">maxAge</param>
<param name="defaultMessage">Your age, its invalid</param>
</message>
</field-validator>
</field>
</validators>
