Client side java script validation using struts validation framework

The struts validation framework also provide you to validate form data on client side using JavaScript without writing a single line of java script code, the struts validation framework generates the JavaScript code for you. In this example we will see how we can achieve client side JavaScript validation using struts validation framework.

We will take up our registration application example for validation framework tutorial, we saw in last tutorial that registration form bean class has been configure inside validation.xml for validation, the validation.xml file look like below code.

<form-validation>
    <formset>
        <form name="registrationForm">
            <field property="firstname" depends="required">
                <arg0 key="registration.firstname" />
            </field>
            <field property="lastname" depends="required">
                <arg0 key="registration.lastname" />
            </field>
            <field property="gender" depends="required">
                <arg0 key="registration.gender" />
            </field>
            <field property="mobile" depends="required,phone">
                <arg0 key="registration.mobile" />
            </field>
            <field property="email" depends="required,email">
                <arg0 key="registration.email" />
            </field>
            <field property="address" depends="required">
                <arg0 key="registration.address" />
            </field>
            <field property="username" depends="required">
                <arg0 key="registration.username" />
            </field>
            <field property="password" depends="required,minlength">
                <arg0 key="registration.password" />
                <arg1 key="${var:minlength}" name="minlength" resource="false" />
                <var>
                    <var-name>minlength</var-name>
                    <var-value>7</var-value>
                </var>
            </field>
        </form>
    </formset>
</form-validation>

To enable the client side javascript validation you need to put the struts html tag library’s javascript tag in each JSP page where your form bean has been defined. This tag will take one attribute named formName, you need to pass the form name same as defined in struts configuration file.

In registration.jsp page we will update the code to for client side java script validation, after updating the register.jsp page looks like below code.

<%@ taglib uri="http://jakarta.apache.org/struts/tags-html"  prefix="html"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-bean"  prefix="bean"%>
 
<html:form action="/registration" styleId="registrationForm" onsubmit="validateRegistrationForm(this);">
<html:javascript formName="registrationForm"/> 
    <table align="center">
        <tr>
            <td colspan="2">
                <div style="color: red;" align="center">
                    <html:errors />
                </div>
            </td>
        </tr>
        <tr>
            <td><bean:message key="registration.firstname" /></td>
            <td><html:text property="firstname"></html:text></td>
        </tr>
        <tr>
            <td><bean:message key="registration.lastname" /></td>
            <td><html:text property="lastname"></html:text></td>
        </tr>
        <tr>
            <td><bean:message key="registration.gender" /></td>
            <td>
                <html:select property="gender">
                    <html:option value="">Select</html:option>
                    <html:option value="MALE">Male</html:option>
                    <html:option value="FEMALE">Female</html:option>
                </html:select>
            </td>
        </tr>
        <tr>
            <td><bean:message key="registration.email" /></td>
            <td><html:text property="email"></html:text></td>
        </tr>
        <tr>
            <td><bean:message key="registration.mobile" /></td>
            <td><html:text property="mobile"></html:text></td>
        </tr>
        <tr>
            <td><bean:message key="registration.address" /></td>
            <td><html:text property="address"></html:text></td>
        </tr>
        <tr>
            <td><bean:message key="registration.username" /></td>
            <td><html:text property="username"></html:text></td>
        </tr>
        <tr>
            <td><bean:message key="registration.password" /></td>
            <td><html:password property="password"></html:password></td>
        </tr>
        <tr>
            <td><html:submit property="submit">Submit</html:submit></td>
            <td><html:reset property="reset">Reset</html:reset></td>
        </tr>
    </table>
</html:form>

You no need to change in rest of files of validation example.

Next we will run the register page and it look like below screen, when some validation failed and errors will show inside java script alert popup.

client-side-java-script-validation-using-struts-validation-framework_files-image001

client-side-java-script-validation-using-struts-validation-framework_files-image002