Home Struts Struts2 Client Side validation in Struts 2 application
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

Client Side validation in Struts 2 application

Advertisement
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

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

     

Advertisements

Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: March 14, 2008

Ask Questions?    Discuss: Client Side validation in Struts 2 application   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
Nikhil
April 22, 2011
Not working

Could you please send me the working source code? Its not working. I tried your code too. Do we need to choose some special theme for it? Thanks
k k sathish kumar
November 22, 2011
This will not work correct in some scenario.

In my application I tried this when I call an action class's method from an anchor tag. The method that called will fetch data from DB and fill my form field such as drop down list in the next page. when I run the application it validates the page while the page gets loaded. but actually it should validate when I give submit.
DMCA.com