Search code examples
spring-mvcdojospring-webflowspring-js

How to check before submitting page that checkboxs required in a Spring WebFlow Project with Dojo

How to make checkboxs required in a Spring WebFlow Project with Dojo (dijit).

I would like to know how to make the checkbox required on submit of the following page.

I don't want the submit to work if the user did not click one of the check box options. thanks. The user needs to click on or both checkbox to submit the page.

 <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core"%>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt"%>
    <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>



    <style type="text/css" media="screen">
     @import url("<c:url value="/resources/dojo/resources/dojo.css"/>");
     @import url("<c:url value="/resources/dijit/themes/claro/claro.css"/>");
    </style>     

    <script djconfig="parseOnLoad: true"
     src="<c:url value="/resources/dojo/dojo.js"/>" type="text/javascript"></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>
    <script type="text/javascript">dojo.require("dojo.parser");</script>

    <html>
    <head>
    <title>Spring 3.0 MVC - Web Flow Example</title>
    </head>
    <body class="claro">
        <h2>CheckBox Test</h2>
        <p>
        <p>
        <form:form commandName="customer" id="customer">
            <input type="hidden" name="_flowExecutionKey"
                value="${flowExecutionKey}" />
            <div id="container">
                <table>
                    <tr>
                        <td><font color=red><form:errors path="sex" /></font><b>Do you have a kid(s) of the follow sex type:</b></td>
                        <td><form:checkbox path="sex" id="sex" value="MALE" /> MALE |  
                            <form:checkbox path="sex" id="sex" value="FEMALE" />FEMALE
                            <script type="text/javascript">
                                dojo.query("#sex input[type='checkbox']").forEach(function(element){
                                    Spring.addDecoration(new Spring.ElementDecoration({
                                        elementId: element.id,
                                        widgetType : "dijit.form.CheckBox",
                                        widgetAttrs : { checked : element.checked, required : true,
                                            validate: function (){
                                                   if(dojo.query("INPUT[type='checkbox']", 'customer').filter(function(n){return n.checked;}).length > 0){return true;} else {alert('choose a type');return false;}
                                              }
    }
                                    }));
                                });
                            </script>
                            </td></tr>
                            </table>
            </div>
            <p>
            <input type="submit" name="_eventId_submit" id="submit" value="Submit" />
            <input type="submit" name="_eventId_cancel" value="Cancel" />
            <p>
            <script type="text/javascript">
                Spring.addDecoration(new Spring.ValidateAllDecoration({
                    elementId : 'submit',
                    event : 'onclick'
                }));
            </script>
        </form:form>
    </body>
    </html>

The screen should look like the following:

enter image description here

Solution

  • I got it working... I have to change my jsp to match the following

    <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<style type="text/css" media="screen">
 @import url("<c:url value="/resources/dojo/resources/dojo.css"/>");
 @import url("<c:url value="/resources/dijit/themes/claro/claro.css"/>");
</style>     

<script djconfig="parseOnLoad: true"
 src="<c:url value="/resources/dojo/dojo.js"/>" type="text/javascript"></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>
<script type="text/javascript">dojo.require("dojo.parser");</script>

<html>
<head>
<title>Spring 3.0 MVC - Web Flow Example</title>
</head>
<body class="claro">
    <h2>CheckBox Test</h2>
    <p>
    <p>
    <form:form commandName="customer" id="customer">
        <input type="hidden" name="_flowExecutionKey"
            value="${flowExecutionKey}" />
        <div id="container">
            <table>
                <tr>
                    <td><font color=red><form:errors path="sex" /></font><b>Do you have a kid(s) of the follow sex type:</b></td>
                    <td><form:checkbox path="sex" id="MALE" value="MALE" /> MALE |
                        <script type="text/javascript">
                                            Spring.addDecoration(new Spring.ElementDecoration(
                                                {
                                                    elementId : 'MALE',
                                                    widgetType : "dijit.form.CheckBox",
                                                    widgetModule : "dijit.form.CheckBox",
                                                    validate: function (){
                                                           if(dojo.query('INPUT[name=sex]', 'customer').filter(function(n){return n.checked;}).length > 0){return true;} else {alert('choose a type');return false;}
                                                      },
                                                    widgetAttrs : {
                                                        value : "MALE",
                                                        required : true,
                                                        promptMessage : "For Retired"
                                                    }
                                                }));
                            </script>  
                        <form:checkbox path="sex" id="FEMALE" value="FEMALE" />FEMALE
                        <script type="text/javascript">
                                            Spring.addDecoration(new Spring.ElementDecoration(
                                                {
                                                    elementId : 'FEMALE',
                                                    widgetType : "dijit.form.CheckBox",
                                                    widgetModule : "dijit.form.CheckBox",
                                                    widgetAttrs : {
                                                        value : "FEMALE",
                                                        required : true,
                                                        promptMessage : "For Retired"
                                                    }
                                                }));
                            </script>
                        </td></tr>
                        </table>
        </div>
        <p>
        <input type="submit" name="_eventId_submit" id="submit" value="Submit" />
        <input type="submit" name="_eventId_cancel" value="Cancel" />
        <p>
        <script type="text/javascript">
            Spring.addDecoration(new Spring.ValidateAllDecoration({
                elementId : 'submit',
                event : 'onclick'
            }));
        </script>
    </form:form>
</body>
</html>