Validation de plusieurs formulaires sur une page à l'aide de Spring Web Flow et de JSF
-
06-07-2019 - |
Question
J'essaie d'utiliser JSF pour valider deux formulaires différents dans les flux Web Spring.
Le problème est que validateAllOnClick semble déclencher TOUS les validateurs côté client de la page.
Définir processIds sur le formulaire Je veux valider l'ID, ou l'ID d'entrée, ou l'ID de validateur ne provoque aucun déclenchement des validateurs côté client si je supprime également validateALlOnClick. Garder validateAllOnClick et définir processIds sur le bouton d'envoi provoque le déclenchement de tous les validateurs côté client.
Comment puis-je effectuer une validation côté client avec un flux Web de printemps et JSF avec plusieurs formulaires?
<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>
La solution
vous pouvez effectuer un simple refactoring en transformant tous ces formulaires en t: sous-formulaires (la balise T fait référence à la bibliothèque tomahawk qui fonctionne bien avec JSF), puis en joignant tous ces sous-formulaires dans
Une fois que vous avez fait cela, vous pouvez appeler des sous-formulaires sélectifs à l’aide de t: commandbutton.
Cette instruction vous aide à soumettre plusieurs formulaires (de manière sélective) à l’aide d’un seul bouton. Regardez la documentation suivante. http://myfaces.apache.org/tomahawk-project/tomahawk12/ tagdoc / t_subform.html
Également dans JSF, pour que le composant soit validé, n'oubliez pas d'utiliser requiered = " true " attributs, sinon les validations ne sont pas vraiment lancées.
J'espère que cela aide.