This question already has an answer here:
Custom JSF validator message for a single input field
(1 answer)
Closed 7 years ago.
how to add my own message for the client side validation in JSF.
<div class="ui-grid-row">
<div class="ui-grid-col-3" align="left">
<h:outputLabel for="cmpny" value="Company Name:" style="font-weight:bold" />
</div>
<div class="ui-grid-col-2">
<p:inputText id="cmpny" value="#{userData.cmpny}">
<f:validateLength minimum="10" />
<p:ajax execute="currentInput" update="company" event="blur" />
</p:inputText>
</div>
<div class="ui-grid-col-1" />
<div class="ui-grid-col-1">
<p:message for="cmpny" id="company" display="icon" />
</div>
<div class="ui-grid-col-5"></div>
</div>
</div>
<div class="ui-grid-col-3" align="left">
<h:outputLabel for="fnm" value="First Name:*" />
</div>
<div class="ui-grid-col-2">
<p:inputText id="fnm" value="#{userData.fnm}" validatorMessage="First Name cannot be left blank and must be greater than 3 characters" >
<f:validateLength minimum="4" />
<p:ajax execute="currentInput" update="firstname" event="blur" process="#this" />
</p:inputText>
</div>
<div class="ui-grid-col-7"><p:message for="fnm" id="firstname" display="icon,text"/></div>
With the help of "validatorMessage" attribute, I am able to show customized messages when ever the validation fails for the primeface elements like (inputText,calendar etc..,),.
You need to supply a message bundle via javascript. See PrimeFacesLocales for examples.
PrimeFaces User Guide, 7. Client Side Validation / 7.4 Messages.
Related
The entered input values reset upon manually selecting the values of selectOneMenu id="format"
The render of selectOneMenu id="format" works fine. But upon selection of the drop down values of selectOneMenu id="format" the entered field input values are blank.
Page
Employee name[Mark] Employee Type [New]
Format [Select some drop down value]
.
Current Output
Employee name[Entered Value Disappeared/null] Employee Type [Selected value disappeared/null]
Format [Selected some drop down value]
Expected Output
Employee name[Mark] Employee Type [New]
Format [Selected Value]
.
I have tried to add
<p:ajax event="valueChange" immediate="true" process="#form" />
The rendering fails if I add it for the selectOneMenu
I have the code below
main.xhtml
<h:form id="newFormBank" enctype="multipart/form-data">
<h:panelGroup id="id">
<p:growl id="growl" sticky="true" showDetail="true" />
<p:wizard id="newBankWizard" showNavBar="true" widgetVar="bankWiz" flowListener="#{javaMB.wizardFlow}">
<p:tab id="pro" title="Banks">
<ui:include src="/jsf/xyz.xhtml" />
<ui:include src="/jsf/employeeloan.xhtml" />
</p:tab>
</p:wizard>
</h:panelGroup>
</h:form>
employeeloan.xhtml
<p:panel id="employeeLoan" styleClass="panelNoBorder">
<div class="ui-g"> <div class="ui-g-1"><p:outputLabel value="Employee Name" /></div>
<div class="ui-g-3"> <p:row> <p:inputText id="employeeName" maxlength="50" style="width: 65%;" value="#{javaMB.visaDetailsEntity.employeeName}" > </p:inputText> </p:row> </div>
<div class="ui-g-1"><p:outputLabel value="Employee Type" /></div>
<div class="ui-g-3">
<p:row> <p:selectOneMenu id="employeeTypeList" value="#{javaMB.visaDetailsEntity.employeeTypeCode}" >
<f:selectItem itemLabel="Select Release Type" itemValue=""> </f:selectItem>
<f:selectItem itemLabel="New" itemValue="1" />
<f:selectItem itemLabel="Existing" itemValue="2" /> </p:selectOneMenu> </p:row> </div> </div>
<div class="ui-g"> <div class="ui-g-1"><p:outputLabel value="CREDIT" /></div>
<div class="ui-g-3">
<p:row>
<p:selectOneMenu id="format" value="javaMB.visaDetailsEntity.visaType.visaId">
<f:selectItem itemLabel="VISA" itemValue="1" />
<f:selectItem itemLabel="MASTER CARD" itemValue="2" />
<f:selectItem itemLabel="DISCOVER" itemValue="3" />
<f:selectItem itemLabel="AMERICAN EXPRESS" itemValue="4" />
<f:ajax render="#form" />
</p:selectOneMenu>
</p:row>
</div>
</div>
<div class="ui-g">
<div class="ui-g-1"><p:outputLabel value="VISA" rendered="#{javaMB.visaDetailsEntity.visaType.visaId == '1'}"/></div>
<div class="ui-g-3"> <p:row>
<p:inputText id="visaeg" maxlength="9" size="30" value="#{javaMB.visaDetailsEntity.malaustin}" label="VISA1" rendered="#{javaMB.visaDetailsEntity.visaType.visaId == '1'}">
</p:inputText>
</p:row>
</div>
<div class="ui-g-1"><p:outputLabel value="VISA" rendered="#{javaMB.visaDetailsEntity.visaType.visaId == '1'}"/></div>
<div class="ui-g-3">
<p:row>
<p:inputText id="visaegg" maxlength="11" size="30" value="#{javaMB.visaDetailsEntity.malecinyc}" label="VISA2" onchange="negateLongitude()" rendered="#{javaMB.visaDetailsEntity.visaType.visaId == '1'}">
</p:inputText>
</p:row>
</div>
</div>
<div class="ui-g">
<div class="ui-g-1"><h:outputLabel value="MASTER CARD" style="overflow: hidden" rendered="#{javaMB.visaDetailsEntity.visaType.visaId == '3'}"/></div>
<div class="ui-g-3">
<p:row>
<p:inputText id="masterd" maxlength="7" size="30" value="#{javaMB.visaDetailsEntity.atepmo}" rendered="#{javaMB.visaDetailsEntity.visaType.visaId == '3'}">
</p:inputText>
</p:row>
</div>
<div class="ui-g-1"><h:outputLabel for="masterdt" value="MASTER CARD DETAILS" rendered="#{javaMB.visaDetailsEntity.visaType.visaId == '3'}"/></div>
<div class="ui-g-3">
<p:row>
<p:inputText id="datilsmast" maxlength="8" size="30" value="#{javaMB.visaDetailsEntity.atepllanyc}" rendered="#{javaMB.visaDetailsEntity.visaType.visaId == '3'}">
</p:inputText>
</p:row>
</div>
</div>
<div class="ui-g">
<div class="ui-g-1"><h:outputLabel value="DISCOVER" rendered="#{javaMB.visaDetailsEntity.visaType.visaId == '4'}"/></div>
<div class="ui-g-3">
<p:row>
<p:inputText id="ltdiscover" maxlength="2" size="30" value="#{javaMB.visaDetailsEntity.egrssfo}" rendered="#{javaMB.visaDetailsEntity.visaType.visaId == '4'}">
</p:inputText>
</p:row>
</div>
<div class="ui-g-1"><h:outputLabel value="DISCOVER Details" rendered="#{javaMB.visaDetailsEntity.visaType.visaId == '4'}"/></div>
<div class="ui-g-3">
<p:row>
<p:inputText id="lodiscover" maxlength="4" size="30" value="#{javaMB.visaDetailsEntity.eongtx}" rendered="#{javaMB.visaDetailsEntity.visaType.visaId == '4'}">
</p:inputText>
</p:row>
</div>
</div>
<div class="ui-g">
<div class="ui-g-1"><h:outputLabel value="AExp AZ" rendered="#{javaMB.visaDetailsEntity.visaType.visaId == '2'}"/></div>
<div class="ui-g-3">
<p:row>
<p:inputText id="azaexp" maxlength="2" size="30" value="#{javaMB.visaDetailsEntity.aexpaz}" rendered="#{javaMB.visaDetailsEntity.visaType.visaId == '2'}">
</p:inputText>
</p:row>
</div>
<div class="ui-g-1"><h:outputLabel value="AExp FL" rendered="#{javaMB.visaDetailsEntity.visaType.visaId == '2'}"/></div>
<div class="ui-g-3">
<p:row>
<p:inputText id="flaexp" maxlength="4" size="30" value="#{fvLocationMB.coordinateForm.aexpazfl}" rendered="#{javaMB.visaDetailsEntity.visaType.visaId == '2'}">
</p:inputText>
</p:row>
</div>
</div>
</div>
</p:fieldset>
</p:panel>
</ui:composition>
javaMB
getters setters
Entity
getters setters
Your p:ajax statement is wrong, it should probably read something like:
<p:ajax event="valueChange" update="#form" />
Find an exhaustive explanation of the inner workings here:
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
Using f:ajax component with h:selectManyListbox, it is firing the listener method but not refreshing the rendering list.
I have Market. When I select market it needs to display Sub-Markets. Initial page load will have all the Markets and Sub-Markets, but it needs to filter when user selects "Market".
Using below code:
<ui:fragment id="uda2" rendered="#{udaList.index eq 1}">
<div class=" row form-group" >
<label class="col-sm-2" for="sel-service">Market:</label>
<div class="col-sm-10">
<h:selectManyListbox style="width:360px;" multiple="" pt:aria-required="true" required="required" pt:data-toggle="chosen"
disabled="# {licenseSelectionBean.isFieldEnabled(FormFieldsEnum.ITEM_UDA2)}"
id="#{FormFieldsEnum.ITEM_UDA2.getFieldCode()}" size="1"
name="#{FormFieldsEnum.ITEM_UDA2.getFieldCode()}"
value="#{licenseSelectionBean.selectedItemUda2}"
styleClass="sel-chosen">
<f:selectItems var="uda2"
value="#{licenseSelectionBean.selectUda2}" />
<f:ajax event="change" execute="#this" render="#this udalist3"
listener="#{licenseSelectionBean.onChangeFilter()}" />
</h:selectManyListbox>
</div>
</div>
</ui:fragment>
<ui:fragment rendered="#{udaList.index eq 2}">
<div class="row form-group" >
<label class="col-sm-2" for="sel-service">Sub-Market:</label>
<div class="col-sm-10">
<h:selectManyListbox style="width:360px;" multiple="" pt:aria-required="true" required="required" pt:data-toggle="chosen"
disabled="#{licenseSelectionBean.isFieldEnabled(FormFieldsEnum.ITEM_UDA3)}"
size="1"
pt:name="udalist3"
value="#{licenseSelectionBean.selectedItemUda3}"
pt:id="udalist3"
styleClass="sel-chosen">
<f:selectItems var="uda3"
value="#{licenseSelectionBean.selectUda3}" />
<!-- <f:ajax render="#{FormFieldsEnum.ITEM_UDA4.getFieldCode()}"
listener="#{licenseSelectionBean.onChangeFilter()}" /> -->
</h:selectManyListbox>
</div>
</div>
</ui:fragment>
Used "pt" for pass-through because JSF prefixing dynamic id.
How to resolve this problem?
Simple solution. Replace
<f:ajax event="change" execute="#this" render="#this udalist3"
listener="#{licenseSelectionBean.onChangeFilter()}" />
with
<f:ajax event="change" execute="#this" render="#form"
listener="#{licenseSelectionBean.onChangeFilter()}" />
This might cause some unnecesarry traffic. You can also encapsulate the second ui:fragment in a panelgroup, e.g.
<h:panelGroup id="wrapper">
<ui:fragment rendered="#{udaList.index eq 2}">
....
</h:panelgroup>
and add replace "udalist3" with "wrapper" in the f:ajax render attribute.
I´m getting confused why the component p:fileUpload doesn´t call the fileUploadListener once the component is shown by the p:ajax. If I put it outside the panelGrids or even remove them, works just fine.
What isn´t working:
<div class="pure-control-group">
<label for="mostraNoIndex">Slideshow</label>
<p:selectBooleanCheckbox value="#{destaqueCadastrarBean.d.apareceNoSlide}">
<p:ajax event="change" update="upload"></p:ajax>
</p:selectBooleanCheckbox>
</div>
<h:panelGrid id="upload">
<h:panelGrid rendered="#{destaqueCadastrarBean.d.apareceNoSlide}">
<div class="pure-control-group">
<label for="mostraNoIndex">Imagem</label>
<p:fileUpload fileUploadListener="#{destaqueCadastrarBean.handleFileUpload}" mode="advanced" dragDropSupport="true" sizeLimit="100000000000" fileLimit="1" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
</div>
</h:panelGrid>
</h:panelGrid>
What works:
<div class="pure-control-group">
<label for="mostraNoIndex">Slideshow</label>
<p:selectBooleanCheckbox value="#{destaqueCadastrarBean.d.apareceNoSlide}">
</p:selectBooleanCheckbox>
</div>
<div class="pure-control-group">
<label for="mostraNoIndex">Imagem</label>
<h:fileUpload fileUploadListener="#{destaqueCadastrarBean.handleFileUpload}" mode="advanced" dragDropSupport="true" sizeLimit="100000000000" fileLimit="1" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
</div>
Just found out a solution for it. The bean being called was RequestScoped, changed it to ViewScoped. I guess cause the bean was requested when the form loaded and p:fileUpload can only appears after the creation of the bean, the component couldn´t reach the bean. With view scope the bean is available for components that comes afterward. If someone has a more technical and clear explanation I would like to understand better.
I´m using jsf to build a form, and I have this kind of inputtext:
<div class="profile-info-row">
<div class="profile-info-name">Promoção:</div>
<div class="profile-info-value">
<span class="input-icon input-icon-right">
<h:inputText id="promocao" class="input-medium"
value="#{itemController.itemPreco.promocao}"
converterMessage="Valor inválido. (Ex.: 0.00)">
<f:convertNumber locale="pt"/>
<f:ajax event="change" render="promocaoMensagem"/>
</h:inputText>
</span>
<div class="help-inline mensagemErro">
<h:message for="promocao" id="promocaoMensagem"/>
</div>
</div>
</div>
and I have to block negative numbers and give a message to user inline that number is forbidden, how is working when the user types a invalid number on input..
Does someone know how I can do that?
Use <f:validateLongRange> with a minimum of 0.
<h:inputText ...>
<f:validateLongRange minimum="0" />
</h:inputText>
The default validation message is:
Validation Error: Value is less than allowable minimum of '0'
Any custom validation message can be set via validatorMessage the same way as you did for converterMessage.
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>