Barebones Spring MVC part 4: Rich client validation

August 17, 2010

In part 3: form validation, I demonstrated server-side JSR-303-backed form validation with Spring MVC. The counterpart to server-side validation is client-side validation, which is made easy by Spring Javascript.

This example builds upon part 1: core to introduce rich client-side validation of an HTML form.

The following changes are required:

  1. Add spring-js to the Maven POM.
  2. Add the Spring Javascript ResourceServlet to the web deployment descriptor.
  3. Add Dojo and Spring Javascript scripts and layout to the views.
  4. Add Spring Javascript validation decorators to the views.

Spring Javascript includes ResourceServlet, which provides various scripts and CSS layouts from both Dojo and Spring Javascript. These add the client-side functionality and look-and-feel needed for rich client-side validation. The ResourceServlet must be added to the web deployment descriptor.

web.xml:

<servlet>
    <servlet-name>Resources Servlet</servlet-name>
    <servlet-class>org.springframework.js.resource.ResourceServlet</servlet-class>
</servlet>

<servlet-mapping>
    <servlet-name>Resources Servlet</servlet-name>
    <url-pattern>/resources/*</url-pattern>
</servlet-mapping>

The Dojo and Spring Javascript scripts and layout must be added to each view which will provide rich client behavior.

simpleForm.jsp:

<head>
    <script type="text/javascript" src="<c:url value="/resources/dojo/dojo.js" />"></script>
    <script type="text/javascript" src="<c:url value="/resources/spring/Spring.js" />"></script>
    <script type="text/javascript" src="<c:url value="/resources/spring/Spring-Dojo.js" />"></script>
    <link type="text/css" rel="stylesheet" href="<c:url value="/resources/dijit/themes/tundra/tundra.css" />" />
</head>

Spring Javascript focuses on the decorator pattern to cleanly introduce rich client behavior into views. This means that a view is fully functional on its own, and the introduction of Spring Javascript into the view adds behavior on top of the existing functionality. This practice, known as progressive enhancement, allows a web application to remain functional across a wealth of browsers, which may vary in their level of support of JavaScript and CSS. The most important takeaway from this idea is that the onclick attribute is never directly used in HTML code. It is only accessed by a decorator, meaning its behavior is only used when the decorator script itself is supported.

The form in simpleForm.jsp: is updated to insert Spring Javascript decorators.

simpleForm.jsp:

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<form:form action="simple" modelAttribute="simpleForm">

        <li>
            <label for="value1">Value 1:</label>
            <form:input path="value1" />
            <script type="text/javascript">
                Spring.addDecoration(new Spring.ElementDecoration({
                    elementId : "value1",
                    widgetType : "dijit.form.ValidationTextBox",
                    widgetAttrs : {
                        regExp : "^.{2,6}$",
                        required : true
                    }
                }));
            </script>
        </li>
        <li>
            <label for="value2">Value 2:</label>
            <form:select path="value2" items="${values}" />
            <script type="text/javascript">
                Spring.addDecoration(new Spring.ElementDecoration({
                    elementId : "value2",
                    widgetType : "dijit.form.ComboBox"
                }));
            </script>
        </li>
        <li>
            <label for="value3">Value 3:</label>
            <div><form:checkbox path="value3" value="check1" label="Check 1" /></div>
            <div><form:checkbox path="value3" value="check2" label="Check 2" /></div>
            <div><form:checkbox path="value3" value="check3" label="Check 3" /></div>
            <script type="text/javascript">
                dojo.query("#value3  input`").forEach(function(element) {
                    Spring.addDecoration(new Spring.ElementDecoration({
                        elementId: element.id,
                        widgetType : "dijit.form.CheckBox",
                        widgetAttrs : { checked : element.checked }
                    }));
                });
            </script>
        </li>
        <li>
            <input id="submit" type="submit" value="Submit" />
            <script type="text/javascript">
                Spring.addDecoration(new Spring.ValidateAllDecoration({
                    elementId: "submit",
                    event: "onclick" }));
            </script>
        </li>

</form:form>

In this example, field decorators have been added to all of the form input fields, and a global validatoin director has been added to the form submission button. These are just a few examples of the vast set of features provided by Dojo. More about the Dojo widgets can be found here.

Spring Javascript is currently part of Spring WebFlow, and documentation is available here.