Client Side validation in Struts 2 application
In this section we will see how to write code that will
generate Java Script code for client side validation. In the last section we
developed Login-validator.xml configuration file for defining the server side
validation. In this section we will use the same Login-validator.xml file for
generating the client side java script.
Developing JSP pages
Here is the code of login jsp page (loginClientSideValidation.jsp)
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>Struts 2 Login Application!</title>
<link href="<s:url value="/css/main.css"/>" rel="stylesheet"
type="text/css"/>
</head>
<body>
<s:form action="doLoginClientSideValidation" method="POST"
validate="true">
<tr>
<td colspan="2">
Login
</td>
</tr>
<s:actionerror />
<s:fielderror />
<s:textfield name="username" label="Login name"/>
<s:password name="password" label="Password"/>
<s:submit value="Login" align="center"/>
</s:form>
</body>
</html>
|
Note that in the above code we have just added
validate="true" in
the <s:form tag...>. This is the only work we have to do and rest work is
done by Struts 2 validator framework. The validator framework generates
JavaScript for validating the form at client side.
Changes in the struts.xml
Add the following code into struts.xml file:
<action name="showLoginClientSideValidation">
<result>/pages/loginClientSideValidation.jsp</result>
</action>
<action name="doLoginClientSideValidation" class="net.roseindia.Login">
<result name="input">/pages/loginClientSideValidation.jsp</result>
<result name="error">/pages/loginClientSideValidation.jsp</result>
<result>/pages/loginsuccess.jsp</result>
</action>
The action showLoginClientSideValidation displays login form while
doLoginClientSideValidation handles the validation request.
Adding the link into index.html
Finally we add the link in the index.html to
access the login form for testing client side validation.
<ul>
<li><a href="roseindia/showLoginClientSideValidation.action">Login Application (Client Side Validation)</a></li>
</ul>
Testing the Client side validation
Start tomcat and type http://localhost:8080/struts2tutorial/.
Your browser should show the following screen:
Now click on "Login Application (Client Side
Validation)" link. Then your browser will display the Login page as shown
below:
Click on the "Login" button without entering anything. Java Script
will show the error message as shown below:
Now enter the "Login Name" and click on the
"Login" button, application will show error as shown below:
Examining the Java Script code generated
The following html code is generated by the framework:
| <html>
<head>
<title>Struts
2 Login Application!</title>
<link href="/struts2tutorial/css/main.css"
rel="stylesheet"
type="text/css"/>
</head>
<body>
<script src="/struts2tutorial/struts/xhtml/validation.js"></script>
<form namespace="/roseindia"
id="doLoginClientSideValidation"
name="doLoginClientSideValidation"
onsubmit="return
validateForm_doLoginClientSideValidation();"
action="/struts2tutorial/roseindia/doLoginClientSideValidation.action"
method="POST">
<table class="wwFormTable">
<tr>
<td colspan="2">
Login
</td>
</tr>
<tr>
<td class="tdLabel"><label
for="doLoginClientSideValidation_username"
class="label">Login
name:</label></td>
<td
><input type="text"
name="username" value=""
id="doLoginClientSideValidation_username"/>
</td>
</tr>
<tr>
<td class="tdLabel"><label
for="doLoginClientSideValidation_password"
class="label">Password:</label></td>
<td
><input type="password"
name="password" id="doLoginClientSideValidation_password"/>
</td>
</tr>
<tr>
<td colspan="2"><div
align="center"><input type="submit"
id="doLoginClientSideValidation_0"
value="Login"/>
</div></td>
</tr>
</table></form>
<script type="text/javascript">
function
validateForm_doLoginClientSideValidation() {
form =
document.getElementById("doLoginClientSideValidation");
clearErrorMessages(form);
clearErrorLabels(form);
var errors = false;
// field name: username
// validator name: requiredstring
if (form.elements['username']) {
field = form.elements['username'];
var error = "Login name is
required";
if (field.value != null && (field.value
== "" || field.value.replace(/^\s+|\s+$/g,"").length
== 0)) {
addError(field, error);
errors = true;
}
}
// field name: password
// validator name: requiredstring
if (form.elements['password']) {
field = form.elements['password'];
var error = "Password is
required";
if (field.value != null && (field.value
== "" || field.value.replace(/^\s+|\s+$/g,"").length
== 0)) {
addError(field, error);
errors = true;
}
}
return !errors;
}
</script>
</body>
</html> |
In the above code you can see the JavaScript code and
function validateForm_doLoginClientSideValidation()
which is generated for client side validation
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
