Search

Struts Client-Side JavaScript Validation Tutorial

Struts Validator Framework provides an easy-to-use mechanism for performing client-side validation. It's very useful to validate some fields on the client-side before sending the data to the server for processing. By this way we can ensure that the data send to the server is valid. Performing validations on the client-side save the user a round trip time to the server.
For each validation routine defined in the validation-rules.xml file Struts provides an optional JavaScript code that can run on the client-side to perform the same validation that takes place on the server side.
Let's take a login application for our example. Our LoginForm extends DynaValidatorForm.
view source
print?
1.<form-bean name="LoginForm"type="org.apache.struts.validator.DynaValidatorForm">
2.<form-property name="userName" type="java.lang.String" />
3.<form-property name="password" type="java.lang.String" />
4.</form-bean>
The following validations are defined in the validation.xml file.
view source
print?
01.<form name="LoginForm">
02.<field property="userName" depends="required">
03.<arg key="LoginForm.userName"/>
04.</field>
05.<field property="password" depends="required,minlength">
06.<arg0 key="LoginForm.password"/>
07.<arg1 key="${var:minlength}" name="minlength" resource="false"/>
08.<var>
09.<var-name>minlength</var-name>
10.<var-value>6</var-value>
11.</var>
12.</field>
13.</form>
To enable client-side validation you have to place the Struts HTML Tag Library's javascript tag in each jsp page for which you need to preform client-side validation.
view source
print?
01.<html>
02.<head>
03.<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
04.<title>JS Validation</title>
05.</head>
06.<body>
07.<html:form action="/Login" onsubmit="validateLoginForm(this);">>
08.<html:javascript formName="LoginForm" />
09.User Name : <html:text name="LoginForm" property="userName" />
10. 
11.Password  : <html:password name="LoginForm" property="password" />
12. 
13.<html:submit value="Login" />
14.</html:form>
15.</body>
16.</html>
The formName property of the javascript tag hold the name of the form specified in the validation.xml file.
Next step is to specify the onsubmit attribute of the HTML Tag Library's form tag. The onsubmit attribute is used to specify the javascript code that should be executed when the form is submitted.
The name of the validate method generated by the javascipt tag is formed by concatenating "validate" with the name of the form specified in the javascript. For example, our form name is "LoginForm" so the generated method name will be "validateLoginForm". If the form name is "loginForm", the generated method name will be "validateLoginForm"
Run the application. The login.jsp page will be displayed. Click the login button without entering the User Name and the Passowrd. The following error messages will be displayed to the user. By using the client-side javascript validation we can display the error messages on the alert box, instead of displaying it on the web page.
 






Posted by No comments:
Labels:

Highlighting Error Fields in Struts Tutorial

In this example we will see how to highlight error fields. This is done by creating a seperate style to apply when an error has occred. This style value is set to the errorStyleClass attribute of the corresponding Struts html tag. In our example the login.jsp page contains the following code.
view source
print?
01.<%@taglib  uri="/WEB-INF/struts-html.tld" prefix="html" %>
02.<html>
03.<head>
04.<title>
05.Highlight Error Fields
06.</title>
07.<link href="style.css" rel="stylesheet" type="text/css" />
08.</head>
09.<body>
10.<html:form action="login" >
11.<table>
12.<tr>
13.<td>
14.User Name
15.</td>
16.<td>
17.<html:text property="userName" errorStyleClass="error"
18.errorKey="org.apache.struts.action.ERROR" />
19.</td>
20.<td>
21.<html:errors property="userName" />
22.</td>
23.</tr>
24.<tr>
25.<td>
26.Password
27.</td>
28.<td>
29.<html:password property="password" errorStyleClass="error"
30.errorKey="org.apache.struts.action.ERROR" />
31.</td>
32.<td>
33.<html:errors property="password" />
34.</td>
35.</tr>
36.<tr>
37.<td>
38.<html:submit value="Login" />
39.</td>
40.</tr>
41.</table>
42.</html:form>
43.</body>
44.</html>
The style.css file has a style class "error", which sets the background to light blue color.
view source
print?
1..error {
2.background-color: #b9ecfd;
3.}
LoginForm class extends org.apache.struts.validator.ValidatorForm. All the validations are done inside the validate method.
view source
print?
01.public ActionErrors validate(ActionMapping mapping, HttpServletRequest request) {
02. 
03.ActionErrors errors = new ActionErrors();
04.if (getUserName() == null || getUserName().length() < 1) {
05.errors.add("userName", new ActionMessage("error.userName.required"));
06.}
07.if (getPassword() == null || getPassword().length() < 1) {
08.errors.add("password", new ActionMessage("error.password.required"));
09.} else if (getPassword().length() < 6) {
10.errors.add("password", newActionMessage("error.password.minlength"));
11.}
12.return errors;
13. 
14.}
The corresponding error messages are configured in the ApplicationResouce.properties file.
view source
print?
1.error.userName.required = User Name is required.
2.error.password.required = Password is required.
3.error.password.minlength = Password can not be less than 6 characters.
Run the application. The login.jsp page will be displayed. Click the login button without entering the User Name and the Passowrd. The following error messages will be displayed to the user.

 



Posted by No comments:
Labels:
Subscribe to: Posts (Atom)