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
Current Comments
9 comments so far (post your own) View All Comments Latest 10 Comments:In the form declaration on the Login.jsp, specify action name and its package namespace separately as :
<s:form action="doLogin" namespace="/roseindia/net" method="POST" validate="true">
This should work now :))
Posted by Diksha Jain on Tuesday, 06.10.08 @ 14:40pm | #62816
--------Original Message --------------------------
Hi Im new to Struts 2 and im trying to use the client side validation but but the java script function is no created, the call is genarated but y repeat the function not. Can someano tell me why.
Thanks very much.
Bye
Posted by William on Thursday, 12.27.07 @ 08:35am | #43908
-----------------------------------
My Opinion
Yes it was done twice. client validation is faster and will not send the data to the server. if client validation fails incase when javascript is disabled...a 2nd catch validation will be activated on the server side...You can see how elegant Struts 2 is.
You can see client validation when you see view page source.
The client validation is OK for me the same message is being shown
Posted by Jaizon F. Lubaton on Monday, 06.9.08 @ 23:31pm | #62749
I've a app that validate a form. When the validation is wrong, the theme change to "default" theme or something like that.
I use, in order to set my theme:
<head>
<title>Login</title>
<link rel=StyleSheet href="/resources/style.css" type="text/css"
media=screen>
</head>
Posted by juan pablo on Tuesday, 03.4.08 @ 01:59am | #51215
Hi Im new to Struts 2 and im trying to use the client side validation but but the java script function is no created, the call is genarated but y repeat the function not. Can someano tell me why.
Thanks very much.
Bye
Posted by William on Thursday, 12.27.07 @ 08:35am | #43908
Thank you for this sweeeet tutorial....
Posted by Harshi on Thursday, 11.8.07 @ 16:36pm | #36631
I try to click Login button more than one times, old error message is not clear, new error message is show in a new line.
Posted by ndlinh on Saturday, 09.29.07 @ 13:25pm | #30470
nice you.
Posted by M.Liang Liu on Saturday, 07.14.07 @ 09:19am | #21260
think you for your tutorials!!!!
but me too I have not client javascript validation in my page !!
Posted by momo on Wednesday, 06.27.07 @ 17:35pm | #20282
Hi,
Thanks for the nice tutorial........
But i am not getting client validation alerts on my page..............
........
Posted by vamsh on Friday, 06.22.07 @ 15:44pm | #19959