Java – Validating multiple forms on one page using Spring Web Flow and JSF

javajsfspringspring-webflow

I'm trying to use JSF to validate two different forms in Spring Web Flows.

The problem is that validateAllOnClick seems to fire EVERY clientside validator on the page.

Setting processIds to the form I want to validate's ID, or input ID, or validator ID just causes none of the client side validators to fire if I also remove validateALlOnClick. Keeping validateAllOnClick and setting processIds on the submit button causes all of the client side validators to fire.

How do I do client side validation with spring web flow and JSF with multiple forms?

    <ui:define name="content">
        <div id="main-content">

        <div id="system">       
        <div class="leftcolumn">
        <ui:fragment>
        <h:form id="testForm">
            <div class="admin-title">User Management</div>
            <div class="system-panel"><span class="header">Add a new
            user</span>
            <table>

                <tr>
                    <td><h:outputLabel for="first_names" value="First Name:" /></td>
                    <td><sf:clientTextValidator required="true"
                        invalidMessage="Please enter user\'s first name " id="requiredFirstName">
                        <h:inputText id="first_names" required="true" />
                    </sf:clientTextValidator></td>
                </tr>
                <tr>
                    <td><h:outputLabel for="last_name" value="Last Name:" /></td>
                    <td><sf:clientTextValidator required="true"
                        invalidMessage="Please enter user\'s last name " id="requiredLastName">
                        <h:inputText id="last_name" required="true" />
                    </sf:clientTextValidator></td>
                </tr>
                <tr>
                    <td><h:outputLabel for="email" value="Email:" /></td>
                    <td><sf:clientTextValidator required="true"
                        invalidMessage="Please enter user\'s e-mail address" id="requiredEmail">
                        <h:inputText id="email" required="true" />
                    </sf:clientTextValidator></td>

                </tr>
                <tr>
                    <td>Set password to last name:<br />
                    (in lower case)</td>

                    <td><h:selectBooleanCheckbox id="init_password" value="true" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="right">
                    <div id="password" class='hide_password'><h:outputLabel
                        for="password" value="Password:" /> <h:inputText id="password" />

                    </div>
                    </td>
                </tr>
            </table>
            <sf:validateAllOnClick>
                <sf:commandButton id="addNewUserAction" action="addUser"
                    value="Add New User" processIds="requiredEmail, requiredLastName, requiredFirstName, email" />
                    </sf:validateAllOnClick>
    </div>

        </h:form> </ui:fragment>

        <ui:fragment>
            <h:form id="akeemForm">
                <div class="system-panel"><span class="header">Reset
                User's Password</span>
                <table>
                    <tr>
                        <td><h:outputLabel for="resetPasswordEmail" value="Email:" /></td>
                        <td><sf:clientTextValidator required="true"
                            invalidMessage="Please enter user\'s e-mail address" id="requiredEmail1" >
                            <h:inputText id="resetPasswordEmail" />
                        </sf:clientTextValidator></td>
                    </tr>
                    <tr>
                        <td><h:outputLabel for="resetPasswordPassword"
                            value="Password:" /></td>
                        <td><sf:clientTextValidator required="true"
                            invalidMessage="Please enter user\'s new password" id="requiredEmail2" >
                            <h:inputText id="resetPasswordPassword" />
                        </sf:clientTextValidator></td>
                    </tr>
                    <tr>
                        <td><h:outputLabel for="resetPasswordNotify"
                            value="Email User Their New Password:" /></td>
                        <td><h:selectBooleanCheckbox id="resetPasswordNotify"
                            value="true" /></td>
                    </tr>
                </table>

                    <sf:commandButton id="changeUserPasswordAction"
                        processIds="*" action="changeUserPassword"
                        value="Reset Password" />
        </div>
            </h:form>
        </ui:fragment> <h:form>
            <div class="system-panel"><span class="header">Manage
            User Profile</span>
            <table width="100%">
                <tr>

                    <td><h:outputLabel value="Search" /></td>
                    <td><h:inputText /></td>
                </tr>
            </table>
            <h:commandButton action="searchUser" value="Search" /></div>
        </h:form></div>
        <div class="rightcolumn">
        <div class="admin-title">Title Management</div>

        <h:form>
            <div class="system-panel"><span class="header">Add A
            Title</span> <br />
            <br />
            <h:commandButton id="addTitle"
                value='Start Process for Adding a Title' action="addTitle" /></div>

        </h:form>


        <div class="system-panel"><span class="header">Edit A
        Title</span> <!--<h:form>-->
        <table width="100%">
            <tr>
                <td class='td_name'>Book title:</td>
                <td><h:form>
                    <h:selectOneMenu id="currentSelectedBook"
                        value="#{bookSelector.selectedBook}">
                        <f:selectItems value="#{bookSelector.options}" />
                    </h:selectOneMenu>

                    <h:commandButton id="cmdButton" value="Go to book Dashboard"
                        action="updateBook" />

                </h:form></td>
            </tr>
        </table>
        <!--        <h:commandButton value="Go to the Edit Title interface" action="updateBook" />
    </h:form>   --></div>

        <h:form
            onsubmit="return confirm('Are you sure you want to delete this book?')">

            <div class="system-panel"><span class="header">Delete A
            Title</span>
            <table width="100%">
                <tr>
                    <td class='td_name'>Book title:</td>
                    <td>Book Select Here</td>
                </tr>
            </table>
            <h:commandButton value="Delete" action="deleteTitle" /></div>

        </h:form> <br />

        <div class="system-panel"><span class="header">Title
        Reports</span>
        <ul>
            <li>Titles without ISBNs or Billing Divisions - <h:form>
                <h:commandLink value="View Report" action="missingBillingIsbn" />
            </h:form></li>
        </ul>
        </div>


        </div>
        </div>


        <div class="clearer"></div>



        </div>
    </ui:define>
</ui:composition>

Best Answer

you can do a simple refactoring by making all those forms as t:subforms (T tag refers to tomahawk library which works well with JSF) and then enclose all these subforms in

Once you have done that, you can call selective subforms using t:commandbutton.

This statement helps you submit multiple forms, (selectively) using one button. Look at following documentation. http://myfaces.apache.org/tomahawk-project/tomahawk12/tagdoc/t_subform.html

Also in JSF, to have component validated don't forget to use requiered="true" attributes, else the validations are not really kicked off.

I hope that helps.

Related Topic