Submit a form without validitating required fields primefaces - validation

I want to have a form with JSF (Primefaces) to have a required field (the username is this example) to be required when saved. Also you can add books to every user, a user can have 0 ... n books. If you add a new book, it is required to give it an author and a name.
I tried it with the code below and already tried many ways of the Partial Processing of Primefaces. However, it is not working correctly. Sometimes I have to enter the required username to add a book or save it not working at all. Is there a way, to only check the required username on save and ignore the required author and bookname?
This is the code for the example:
<h:form>
<p:outputPanel id=„userdetails“>
<p:inputText id="name" value="#{bean.name}" />
</p:outputPanel>
<p:inputText id="txt_title" value="#{createBookBean.book.title}"
required="true" />
<p:inputText id="txt_author" required="true"
value="#{createBookBean.book.author}" />
<p:commandButton value="Reset" type="reset" />
<p:commandButton id="btn_add" value="Add"
update="books msgs #parent" action="#{createBookBean.reinit}">
<p:collector value="#{createBookBean.book}"
addTo="#{createBookBean.books}" />
</p:commandButton>
<p:outputPanel id="books">
<p:dataTable id="booksTable" value="#{createBookBean.books}"
var="book">
<h:outputText value="#{book.title}" />
<h:outputText value="#{book.author}" />
<p:column>
<p:commandLink value="Remove" update=":form:books"
process=":form:books">
<p:collector value="#{book}"
removeFrom="#{createBookBean.books}" />
</p:commandLink>
</p:column>
</p:dataTable>
</p:outputPanel>
<p:commandButton value="Save" update="msgs" process="#form"
action="#{bean.save()}"></p:commandButton> // button to save, and ignore required bookname
</h:form>
// button to save, and ignore required bookname

For that purpose you can use immediate attribute of commandButton:
<p:commandButton value="Save" update="msgs" process="#form"
action="#{bean.save()}" immediate="true" />

Related

Primefaces 2 <h:form> and 2<p:message> confusion

My login page has 2 forms, 1 for login itself, and another one to create new users and they are in a tab view(p:tabView), so users will never see both on the page, it would be, one or another.
The problem is that everytime that a valitation fails on login tab, the failure is also shown in the new user tab, and vice-versa.
How to handle this? i tried to set update property in the buttoncommand, but it did not work
see my code below:
<p:tabView id="loginTabView" orientation="right" style="margin-bottom:20px" styleClass="login_fields_panel">
<p:tab title="Acesso" id="acessoTab" >
<h:form>
<h3><h:outputText value="#{bundle.loginHello}" escape="false"/></h3>
<p:messages id="messages_login" showDetail="false" autoUpdate="true" closable="true" showIcon="true"/>
<p:outputLabel for="email" value="#{bundle.label_email}"/>
<p:inputText value="#{loginMB.email}" label="#{bundle.label_email}" id="email" required="true" validatorMessage="#{bundle.emailInvalido}" size="45">
<f:validateRegex pattern="^[\w-\.]+#([\w-]+\.)+[\w-]{2,4}$" for="email" />
</p:inputText>
<br/>
<p:outputLabel for="senha" value="#{bundle.label_password}" />
<p:password value="#{loginMB.password}" id="senha" label="#{bundle.label_password}" required="true" size="45"/>
<br/><br/>
<p:commandButton action="#{loginMB.login}" value="#{bundle.btn_login}" ajax="false" update="messages_login"/>
</h:form>
</p:tab>
<p:tab title="Faça seu cadastro aqui" id="newUserPanel" >
<h:form id="formNewUser">
<h3><h:outputText value="#{bundle.loginHello}" escape="false"/></h3>
<p:messages id="messages_new" showDetail="false" autoUpdate="true" closable="true" showIcon="true" />
<h:panelGrid columns="2" id="matchGrid" cellpadding="1">
<p:outputLabel for="email" value="#{bundle.label_name}: "/>
<p:inputText value="#{loginMB.email}" label="#{bundle.label_name}:" id="name" required="true" validatorMessage="#{bundle.emailInvalido}" size="45" maxlength="100">
</p:inputText>
<p:outputLabel for="email" value="#{bundle.label_email}: "/>
<p:inputText value="#{loginMB.email}" label="#{bundle.label_email}" id="email" required="true" validatorMessage="#{bundle.emailInvalido}" size="45">
<f:validateRegex pattern="^[\w-\.]+#([\w-]+\.)+[\w-]{2,4}$" for="email" />
</p:inputText>
<p:outputLabel for="senha" value="#{bundle.label_password}" />
<p:password value="#{loginMB.password}" id="senha" label="#{bundle.label_password}" required="true" size="45"/>
<p:outputLabel for="senhaConfirmacao" value="#{bundle.label_password_confirmacao}" />
<p:password value="#{loginMB.password}" id="senhaConfirmacao" label="#{bundle.label_password_confirmacao}" required="true" size="45"/>
<p:outputLabel for="birthday" value="#{bundle.label_birthday}" />
<p:calendar id="birthday" value="#{calendarView.date2}" required="true" size="45" pattern="dd/MM/yyyy"/>
</h:panelGrid>
<br/><br/>
<p:commandButton id="btn_create" action="#{loginMB.createUser}" value="#{bundle.btn_criar_usuario}" ajax="true" update="messages_new"/>
</h:form>
</p:tab>
thanks
The described problem with two forms and two message components is actually two-fold:
You're using autoUpdate="true" on those message components. So regardless of what you specify in update attribute, those message components will be auto-updated.
You need to either remove the autoUpdate="true" from the message components, or add ignoreAutoUpdate="true" to the command component.
You're using ajax="false" on the first button. This forces a full page reload. Do note that all ajax-related attribtes such as process and update are ignored in such case.
You need to either re-enable ajax on the first button, or to add redisplay="false" to the second message component.

<p:commandButton> won't submit form on first click if <p:inputText> field uses <p:ajax>

I'm having an issue with the following form:
<h:form>
<p:outputPanel autoUpdate="true">
<p:panelGrid columns="2">
<f:facet name="header">
<h:outputText value="Edit a Recycler"/>
</f:facet>
<p:outputLabel value="Recycler Name" for="recyclerName"/>
<p:inputText id="recyclerName" value="#{RecyclerAdmin.editItem.company.companyName}" required="true" requiredMessage="You must name the recycler.">
<p:ajax async="true" />
</p:inputText>
<p:outputLabel value="Zip Code" for="zipCode"/>
<p:inputText id="zipCode" value="#{RecyclerAdmin.editItem.company.primaryAddressId.zip}" required="false">
<p:ajax event="blur" async="true" update="citystate" listener="#{RecyclerAdmin.zipCodeChanged}"/>
</p:inputText>
<p:outputLabel value="City/State"/>
<c:choose>
<c:when test="${RecyclerAdmin.editItem.company.primaryAddressId.city != null and RecyclerAdmin.editItem.company.primaryAddressId.city.length() > 0}">
<h:outputText id="citystate" value="#{RecyclerAdmin.editItem.company.primaryAddressId.city}, #{RecyclerAdmin.editItem.company.primaryAddressId.state}"/>
</c:when>
<c:otherwise>
<p:spacer id="citystate"/>
</c:otherwise>
</c:choose>
<f:facet name="footer">
<p:commandButton id="updatebutton" action="#{RecyclerAdmin.update()}" value="Save" ajax="false"/>
<p:commandButton id="cancelbutton" action="#{RecyclerAdmin.cancel}" value="Cancel" ajax="false" immediate="true"/>
</f:facet>
</p:panelGrid>
</p:outputPanel>
</h:form>
If I make a change to the "Recycler Name" text field, and then immediately click on the save button, the button click highlighting activates, and remains active, but the form does not submit until the button is clicked a second time. If I click somewhere else before clicking on the save button, everything works, and if I remove the ajax async="true" from the recyclerName field, the form also will submit normally, but I need the ajax reference otherwise any changed values in the field are erased when the zipCode field is manipulated.
Any ideas?
The problem was caused by the outputPanel autoUpdate="true" tag. i have added specific update field references to the individual ajax tags and the problem is now gone.
try different event
try removing async=true
p:ajax event="keyup"
http://www.primefaces.org/showcase/ui/ajax/event.xhtml

Update the JSF bean even if the validation fails?

JSF beans are generally not updated when the validation fails, which in some cases causes really ugly effects, for example, when using facet="output" of p:inplace:
<h:form>
<h:panelGrid id="panel" columns="3" cellpadding="2">
<p:outputLabel value="My Field" for="myfield" />
<p:inputText id="myfield" value="#{test.myField}" required="true" />
<p:message for="myfield" />
<h:outputText value="Checkbox: " />
<p:inplace id="checkboxInplace" effect="none">
<f:facet name="output">#{test.myBooleanText}</f:facet>
<f:facet name="input">
<h:selectBooleanCheckbox value="#{test.myBoolean}" />
</f:facet>
</p:inplace>
<p:spacer />
</h:panelGrid>
<p:commandButton id="refresh" icon="ui-icon-refresh" update="panel" process="#form"/>
</h:form>
The output facet defines the inplace labels, which should be localized instead of standard ones:
private boolean myBoolean;
public String getMyBooleanText() {
return myBoolean ? "Ja" : "Nein";
}
However, when the validation fails, the inplace output facet shows the old value of the checkbox, not the actual one. If you click on it, a real value is shown.
How to solve that issue and actualize the output correctly? Submiting the values to the bean would be the best, because I have no problem with consistent state of values on the client and server, as long no action is actually executed (asserted by the validation).
Haven't tried it myself, but give this a chance:
<p:inplace id="checkboxInplace" effect="none">
<f:facet name="output">#{test.myBoolean ? 'Ja' : 'Nein'}</f:facet>
<f:facet name="input">
<h:selectBooleanCheckbox value="#{test.myBoolean}" immediate="true">
<p:ajax update="#parent" />
<h:selectBooleanCheckbox />
</f:facet>
</p:inplace>

Primefaces update from inside another form

I'm not sure what's wrong with my HTML code. From what I read, it should work. I even tried using prependId="false" which didn't resolve the problem of not finding the UI Component.
<p:tabView>
<p:tab title="Tab1" id="tab1">
<h:form id="form1" prependId="false">
<p:panelGrid columns="2" id="grid1">
<h:outputLabel for="minDraw" value="Starting draw number:" />
<p:inputText id="minDraw" value="#{LottoMaxBacking.minDraw}" />
<p:commandButton value="Get Frequency From Begining"
actionListener="#{LottoMaxBacking.loadAllDrawFreq}"
update=":form2:freqTable" />
</p:panelGrid>
</h:form>
<h:form id="form2" prependId="false">
<p:dataTable var="entry" value="#{LottoMaxBacking.drawFreqList}"
id="freqTable">
<f:facet name="header">
<h:outputText value="#{LottoMaxBacking.tableHeader}" />
</f:facet>
<p:column sortBy="#{entry.key}" headerText="Ball Number">
<h:outputText value="#{entry.key}" />
</p:column>
<p:column sortBy="#{entry.value}" headerText="Frequency">
<h:outputText value="#{entry.value}" />
</p:column>
</p:dataTable>
</h:form>
</p:tab>
<p:tab title="Tab 2"></p:tab>
</p:tabView>
I tried ":tab1:form2:freqTable", ":freqTable", and "freqTable" but none of them work. When I put both forms together as a single form, it would find the freqTable fine.
OK I finally figured it out after looking at the error message again.
Cannot find component with identifier ":form2:freqTable" referenced from "j_idt54:j_idt56"
idt54 refers to the TabView and idt56 refers to the command button. So it turns out that my button's AJAX update string didn't go far enough original and all my other attempts referred to the wrong parent container. I added an id to p:tabView and changed the update String and it worked.
<p:commandButton value="Get Frequency From Begining"
actionListener="#{LottoMaxBacking.loadAllDrawFreq}"
update="tv:form2:freqTable" />

Keep <p:dialog> open when validation has failed

I have a CRUD page which shows data from a query (a List of domain objects) in a Primefaces datatable.
<p:dataTable
id="negozi"
var="n"
value="#{nController.theListFromQuery}"
rowKey="#{n.id}"
selection="#{nController.selected}"
selectionMode="single">
<p:column headerText="Field1">
<h:outputText value="#{n.f1}" />
</p:column>
<p:column headerText="Field2">
<h:outputText value="#{n.f2}" />
</p:column>
<p:column style="width:4%">
<p:commandButton
actionListener="#{nController.prepareEdit(n)}"
update=":editDialogId"
oncomplete="editDialog.show()"
value="Edit" />
</p:column>
...
By clicking on the edit button a dialog will be shown:
<p:dialog
header="Edit N"
widgetVar="editDialog"
id="editDialogId">
<h:form id="formDialog">
<h:panelGrid id="editDialogTable" columns="2" cellpadding="10" style="margin:0 auto;">
<p:outputLabel for="field1" value="F1:" />
<p:inputText id="field1" value="#{nController.selected.f1}" />
<p:outputLabel for="field2" value="F2:" />
<p:inputText id="field2" value="#{nController.selected.f2}" />
<p:commandButton
value="Confirm"
actionListener="#{nController.doEdit}"
update=":form"
oncomplete="editDialog.hide()"
rendered="#{nController.selected.id!=null}" />
...
It works. Now I want to make F1 a required field.
I add the "required" attribute to the inputText field and what happens?
When I try to confirm the form without the required field, the entity is not edited (that's right) but the dialog is closed (that's NOT right!)
When I reopen the dialog I can see the red highlight on the required (and invalid) field.
What I want is to prevent the dialog closing if the form is invalid.
Do I have to write some JS or will JSF help me?
The PrimeFaces ajax response puts an args object in the scope which has a validationFailed property. You could just make use of it.
oncomplete="if (args && !args.validationFailed) PF('editDialog').hide()"
(the args precheck is necessary to not cause a JS error when an exception is thrown during request)
You could refactor it to a reusable JS function as follows.
oncomplete="hideDialogOnSuccess(args, 'editDialog')"
function hideDialogOnSuccess(args, dialogWidgetVar) {
if (args && !args.validationFailed) {
PF(dialogWidgetVar).hide();
}
}
this post is now three years old, but I have found helpful, so my findings may help others.
In PF 5.x at least, it seems that the solution provided by BalusC has to be modified in two ways. (1) add the "args" argument to the call in oncomplete event hander, and (2) use the PF primefaces primitive to identify the widget in PF tables. Here is the code I am using:
oncomplete="hideDialogOnSuccess(args, PF('editDialog'))"
function hideDialogOnSuccess(args, dialogWidgetVar) {
if (args && !args.validationFailed) {
dialogWidgetVar.hide();
}
}
I believe this is the cleanest solution.
Doing this you don't need to change your buttons code.
This solution overrides the hide function prototype.
$(document).ready(function() {
PrimeFaces.widget.Dialog.prototype.originalHide = PrimeFaces.widget.Dialog.prototype.hide; // keep a reference to the original hide()
PrimeFaces.widget.Dialog.prototype.hide = function() {
var ajaxResponseArgs = arguments.callee.caller.arguments[2]; // accesses oncomplete arguments
if (ajaxResponseArgs && ajaxResponseArgs.validationFailed) {
return; // on validation error, prevent closing
}
this.originalHide();
};
});
This way, you can keep your code like:
<p:commandButton value="Save" oncomplete="videoDetalheDialogJS.hide();"
actionListener="#{videoBean.saveVideo(video)}" />
to keep the dialog Open on validation Failed, you just need set the commandButton as follows:
<p:commandButton value="save"
action="#{YourBean.yourActionMethod}"
oncomplete="if (!args.validationFailed) PF('yourDialogWidgetVar').hide()"/>
I gonna leave here a complete example:
<h:form id="ad-form">
<p:dialog id="ad-dialog" widgetVar="adDialog" modal="true" width="400"
closeOnEscape="true" resizable="false" header="Addreass">
<p:messages id="a-msgs" closable="true" />
<h:panelGrid columns="2" id="ad-painel-dialog" width="100%">
<p:outputLabel value="Country" for="country" />
<p:inputText id="country" style="width:100%"
value="#{clientSaverBean.editableAddress.country}" />
<p:outputLabel value="City" for="city" />
<p:inputText id="city"
value="#{clientSaverBean.editableAddress.city}" />
<p:outputLabel value="Zip-Code" for="zipcode" />
<p:inputText id="zipcode"
value="#{clientSaverBean.editableAddress.zipCode}" />
<p:outputLabel value="Street" for="street" />
<p:inputTextarea id="street"
value="#{clientSaverBean.editableAddress.street}" />
<p:outputLabel value="Number" for="number" />
<p:inputText id="number"
value="#{clientSaverBean.editableAddress.number}" />
<h:panelGroup />
<f:facet name="footer">
<p:commandButton value="save"
action="#{clientSaverBean.saveAddress}"
process=":ad-form:ad-dialog"
update=":ad-form:a-msgs :ad-form:ad-painel-dialog :client-form:ad-table"
oncomplete="if (!args.validationFailed) PF('adDialog').hide()"/>
</f:facet>
</h:panelGrid>
</p:dialog>
</h:form>

Resources