Component doesn't show the validation/error message just an icon - validation

I have an autocomplete with validator. If the validator fails, it doesn't show the error message. It is shown only in a tooltip.
<h:panelGroup styleClass="form-group">
<div class="col-md-3">
<p:outputLabel value="#{labels['product_console_ins_management_company']}"
for="managementCompany" />
<p:panel rendered="#{empty saveProduct.initShowId}" >
<div class="form-control">
<p:autoComplete id="managementCompany"
required="true"
requiredMessage="#{labels['product_console_ins_management_company_validation']}"
value="#{saveProduct.product.company}"
var="b" itemLabel="#{b.description}" itemValue="#{b}"
completeMethod="#{saveProductConsoleController.completeInstrumentFactory}"
process="#this" scrollHeight="300" forceSelection="true"
converter="components.SimpleTypeBeanCollectionArrayConverter">
<f:validator validatorId="managementCompanyValidator"/>
<f:attribute name="boundList"
value="#{domainData.instrumentFactoryList}" />
</p:autoComplete>
</div>
</p:panel>
<br />
<p:outputLabel
rendered="#{ not empty saveProduct.initShowId}"
value="#{saveProduct.product.company.description}" />
<p:message for="managementCompany" display="icon" />
</div>
</h:panelGroup>
Screenshot of the problem

This is exactly what you tell it to do and effectively your question is not related to the validator or the p:autocomplete.
From the PrimeFaces documentation (read it, use it, it IS usefull)
Display Mode
Message component has three different display modes;
text : Only message text is displayed.
icon : Only message severity is displayed and message text is visible as a tooltip.
both (default) : Both icon and text are displayed.
This can also be seen in the PrimeFaces showcase for the message(s) component
So if you want different behaviour, choose a different value ('text' or 'both')

Related

Validation errors in dialog not updating after failed submit in JSF

So I click a button which opens a dialog. Inside this dialog I want to fill out information in a form and submit and save it. Some of the inputTexts need to be required in order to submit. So I use the required="true" attribute. It stops the submission, but it does not update the field with a red outline of everything. Now, if I hit cancel and open up the dialog again it will show the fields that failed validation with a red outline!
I thought I could solve this by manually updating the dialog whenever I try to submit the form. This just causes the dialog to close though instead of staying open and refreshing the dialog to show the validation failures.
This is the dialog, when I hit the save button is when I submit the form
<h:form>
<p:dialog header="#{headerValue}" widgetVar="#{uniqueId}_editDialog"
modal="false" showEffect="fade" styleClass="dialogGrid"
dynamic="true" draggable="true" resizable="false">
<p:outputPanel style="text-align:center;" layout="block">
<p:messages autoUpdate="true"/>
<ui:insert name="editContent">
Edit Content Here. Use 'selectedModel.whatever'
</ui:insert>
<p:panelGrid columns="3" styleClass="buttonGrid">
<ui:insert name="saveButton">
<p:commandButton iconPos="left" value="#{msg.save}"
rendered="#{'VIEW' != selectedModel.viewState}"
process="#widgetVar(#{uniqueId}_editDialog)"
action="#{adapterInjector.add(modelList, selectedModel)}"
update="#widgetVar(#{uniqueId}_itemsDataList) #widgetVar(#{uniqueId}_addButton) #widgetVar(#{uniqueId}_editDialog)"
oncomplete="if(!args.validationFailed) PF('#{uniqueId}_editDialog').hide()"
partialSubmit="true" validateClient="true">
</p:commandButton>
</ui:insert>
<p:commandButton iconPos="right" value="#{msg.cancel}"
process="#this" oncomplete="PF('#{uniqueId}_editDialog').hide()"
resetValues="true" partialSubmit="true">
</p:commandButton>
</p:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>
This is an inserted component which has the required attribute
<p:selectOneMenu id="licenseCert"
value="#{selectedModel.selectedLicenseCert}" filter="true"
required="true">
<f:selectItem itemLabel="#{msg.selectOne}" itemValue=""
noSelectionOption="true" />
<f:selectItems value="#{licCert.allLicenseCertMap.entrySet()}"
var="entry" itemValue="#{entry.key}" itemLabel="#{entry.value}" />
</p:selectOneMenu>
</p:column>
Turns out this fixed the problem.
For best practice you should:
move the <h:form> inside the dialog
process the moved <h:form> in the save button.

Show previous valid value of h:selectOneListbox when invalid selection is made

I have a problem with the validation of a selectOneListBox. Everything works fine and a message is displayed, when the input is false. But the dropdown keeps the selected value as the dropdown value. I want to display the old value if validation fails.
So how can I do that?
I tried this:
<h:selectOneListbox id="intFrom" value="#{searchBean.intFrom}" size="1" immediate="true" class="intSelectBox1">
<f:ajax render=":menuForm :searchForm:searchButton" listener="#{menuBean.focus(menuBean.mySearch)}" />
<f:ajax listener="#{searchBean.count()}" render="int1" />
<f:ajax execute="intFrom" render="intFrom" />
<f:selectItems value="#{searchBean.intRangeFrom}" />
<f:validator validatorId="project.IntFromValidator" />
</h:selectOneListbox>
<h:message id="int1" for="intFrom" style="color: red" />
But after that the new value is being displayed not the old one.

How can I choose where the error message from the validator `required` appear?

How can I choose where the error message from the validator required appear?
The error message is now displayed at the bottom of my page but I want it next to my inputbox.
<p>Firstname: <h:inputText value="#{userBean.firstname}" required="true"/></p>
<p>Lastname: <h:inputText value="#{userBean.lastname}" required="true"/></p>
Those appearing at the bottom are actually unhandled messages which will only appear when the javax.faces.PROJECT_STAGE is been set to Development in web.xml.
You need a <h:message> to declare the location where the message should be shown. Further, you also need a <h:outputLabel> to represent the labels (which has semantic and usability advantages).
Here's the complete set:
<p>
<h:outputLabel for="firstname" value="Firstname:"/>
<h:inputText id="firstname" label="Firstname" value="#{userBean.firstname}" required="true"/>
<h:message for="firstname" />
</p>
<p>
<h:outputLabel for="lastname" value="Lastname:"/>
<h:inputText id="lastname" label="Lastname" value="#{userBean.lastname}" required="true"/>
<h:message for="lastname" />
</p>

AjaxStatus not working with dialog

I have a ajaxstatus and dialog which is used for searching
<h:body>
<p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>
<p:dialog id="loading" modal="true" widgetVar="statusDialog" header="" draggable="false" closable="false">
<p:graphicImage value="/images/ajax-loader.gif" />
</p:dialog>
Dialog Part
<p:dialog id="showDial" header="Search" widgetVar="srch" resizable="false" >
<h:panelGrid id="searchGrid" columns="2" cellpadding="10" >
<h:outputLabel id="srchIdLbl" value="Employee ID:" />
<p:inputText id="srchIdTxt" value="#{employee.employeeId}" />
<p:commandButton id="search1" value="Search" type="submit" action ="#{employee.search()}"
update="patientTbl"/>
<p:commandButton id="reset1" value="Reset" type="reset" />
</h:panelGrid>
</p:dialog>
the above code works fine, it displays the loading dialog. But once the search is completed the dialog will remain in the screen.
I added the below code in the commandButton id="search1" to close the dialog
onComplete="showDialog.hide()"
*Problem:*If i add the above line the AjaxStatus is not shown. I want to know why its not displaying.
I also tried adding the below code to the commandButton id="search1"
onclick="statusDialog.show()" onselect="statusDialog.show()" onmousedown="statusDialog.show()" onComplete="showDialog.hide() statusDialog.hide()"
Problem In the above code the background to dialog is disabled until the ManagedBeans code is completed and the dialog also closes but when i click the search button it loads with the previously entered search parameter even on clicking the reset button the data doesn't go.
How do i overcome the above problem of the previously entered data not going or how can i do the Ajaxstatus in a better way to avoid the above problems.

Validation and Faces Messages are not displayed

I have the following form in a p:outputPanel
<h:form id="someForm">
<p:panel id="panel" header="HEADER">
<h:panelGrid columns="5">
<h:outputLabel value="Name:" for="name" />
<p:inputText id="name" value="#{userBean.name}" required="true"
requiredMessage="ASD" label="name" maxlength="15">
<f:validateLength minimum="10"></f:validateLength>
<p:ajax event="blur" update="inputValidationMessage" />
</p:inputText>
<p:message id="inputValidationMessage" showDetail="true" for="name"
display="icon" />
<p:watermark for="name" value="e.g Jill" />
</h:panelGrid>
<p:commandButton value="Save" update="panel"
actionListener="#{userBean.doSomething}">
</p:commandButton>
</p:panel>
</h:form>
I expect that when the inputText element loses focus and its content has a length less than 10 characters, the message ASD is displayed right next to it. However, what happens in case validation fails is, only a red cross icon is displayed. The message ASD is missing. Changing showDetail to showSummary doesn't work neither.
Secondly, the commandButton calls userBean.doSomething:
UserBean#doSomething:
public void doSomething(ActionEvent actionEvent) {
RequestContext context = RequestContext.getCurrentInstance();
FacesMessage facesMessage = new FacesMessage(FacesMessage.SEVERITY_WARN,
"Summary",
"Detail"));
FacesContext.getCurrentInstance().addMessage(null, facesMessage);
context.addCallbackParam("booleanVar", true);
}
The FacesMessage is not being displayed.
I'm using JSF2.0 with Primefaces 3.0 on Weblogic 12.1.
Any help appreciated.
You've declared the <p:message> as follows:
<p:message ... display="icon" />
Here's a cite from the <p:message> documentation in the PrimeFaces User Guide:
Display Mode
Message component has three different display modes;
text : Only message text is displayed.
icon : Only message severity is displayed and message text is visible as a tooltip.
both (default) : Both icon and text are displayed.
So the message severity is displayed as icon and message text is only displayed as tooltip of the icon. You need to remove the display="icon" so that it will show both in view.
<p:message ... />

Resources