I have written a password validator in Primefaces which will trigger validation whenever typing.
<p:password id="password1" class="col-11" value="#{bean.password1}" label="Password">
<p:ajax update="#(form :input:not(button))"/>
<p:ajax event="keyup" process="#this" update="password1Icon "
global="false" listener="#{controller['checkPassword'](bean)}"/>
<p:ajax event="change" process="#this" update="password1Icon "
global="false" listener="#{controller['checkPassword'](bean)}"/>
</p:password>
But the validation cannot be triggered by browser password fill in. Which ajax event can listen the browser password fill in?
enter image description here
Related
i'm using JSF 2.2.8 and primefaces 6.0 and I'm trying to update an element in my form. When i run my XHTML everything is displayed correctly but unfortunately when I start to input data in the input fileds it does'nt let me input data and the input mask is applied to each input and by displaying a message you must indicate a value and the fields are not required
Here is the screen of my view
http://imgur.com/a/e5avV
and here is the code which causes the problem
<h:form>
<ui:repeat value="#{etpBean.affectations}" var="affectation">
<ui:repeat var="activite" value="#{etpBean.activites}">
<p:inputText value="#{etpBean.getValeurActivite(affectation,activite).etp}">
<p:ajax listener="#{etpBean.onControleChange(affectation)}" process="#this" update=":#{p:component('controle1')}" event="blur" />
</p:inputText>
</ui:repeat>
<ui:repeat var="projet" value="#{etpBean.projet}">
<p:inputText value="#{etpBean.getValeurActivite(affectation,projet).etp}">
<p:ajax listener="#{etpBean.onControleChange(affectation)}" process="#this" update=":#{p:component('controle1')}" event="blur" />
</p:inputText>
</ui:repeat>
<h:outputText id="controle1" value="#{affectation.message}"/>
</ui:repeat
</h:form>
I tried to add the process in but it does not work.And what I do not understand why the validation is triggered while I have not yet submit the form.
There is an implicit #{component} object in the EL scope that evaluates to the current UI component.
try this
<p:ajax listener="#{etpBean.onControleChange(affectation)}" process="#this" update=":#{p:component('controle')}" event="blur" />
When I submit a PrimeFaces 5.2.6 <p:calendar mask="true"> in a JSF 2.2 form by button click with no custom validator, an empty value is valid. But if I submit it with <p:ajax event="blur"> like below,
<h:form>
<p:messages autoUpdate="true" />
<p:calendar pattern="dd/MM/yyyy" mask="true">
<p:ajax event="blur" />
</p:calendar>
</h:form>
then I get the below validation error?
'__/__/____' could not be understood as a date.
The calendar value is not set to required=true. Why is the behaviour different?
In my xhtml page I have inputText field with two Validators attached to it. Also there is ajax event "blur" attached for triggering validation when switching focus from a field. Here is the code:
<t:selectOneMenu id="locateRecordBy" value="#{personBean.locateRecordBy}">
<f:selectItems value="#{personBean.locateRecordByItems}"/>
</t:selectOneMenu>
<t:inputText id="personName"
value="#{personBean.name}"
required="true"
requiredMessage="Name is required.">
<p:ajax event="blur" partialSubmit="true" process="#this" update="nameerror" global="false" />
<f:validator disabled="#{param['PersonForm:locateRecordBy'] == 'FEMALE'}" validatorId="com.myapp.validators.MalePersonValidator"/>
<f:validator disabled="#{param['PersonForm:locateRecordBy'] == 'MALE'}" validatorId="com.myapp.validators.FemalePersonValidator"/>
</t:inputText>
So I'd like to validate personName against appropriate Validator depending of selecting item after focus is not anymore on the personName field. Any suggestions please, what should I change or add?
p.s. On form submit validation work very well.
Actually I found what was missing in my code. I added locateRecordBy componnent to be processed with ajax so instead of having this:
<p:ajax event="blur" partialSubmit="true" process="#this" update="nameerror" global="false" />
I have this:
<p:ajax event="blur" partialSubmit="true" process="#this, locateRecordBy" update="nameerror" global="false" />
Basically I forgot instruct JSF to process locateRecordBy and that's why locateRecordBy parameter was never present in the ajax request which caused both validators to be became disabled and validation of personName field to be skipped.
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.
I am using jsf 2.1 + primefaces 3.4.1. I've got problems with preventing validation of disabled components.
What I have is approximately this:
<h:form id="form">
<p:dataTable id="parentDataTable" value=#{bean.list} var="parentItem"..>
<p:column>
..
<p:dataTable id="childDataTable" value=#{bean.map[parentItem]}" var="childItem">
<p:column>
<f:facet name="header">
some inputText
</f:facet>
<p:inputText id="inputText"
disabled=#{bean.selectedObjectsMap[childItem]} required="true" requiredMessage="value required" />
<p:message for=":form:parentDataTable:childDataTable:inputText" />
</p:column>
<p:column>
<f:facet name="header">
Select
</f:facet>
<p:selectBooleanCheckbox id="checkBox" value="#{bean.selectedObjectsMap[childItem]}">
<p:ajax update=":form:parentDataTable:childDataTable:inputText" />
</p:selectBooleanCheckbox>
</p:column>
</p:dataTable>
</p:column>
</p:dataTable>
</h:form>
The idea is that by default the inputText component is disabled and the "required value" validation doesn't work when I submit the form. When I click the selectBooleancheckbox component the inputText gets enabled and the "required value" validation works as well when I submit the form. However, when I disable the inputText back the validation continues to work and the "value required" message appears and I cannot submit the form. It seems that the JSF UI component tree on the server side doesn't properly get updated when I click on the checkbox, although visually I can see that the inputText component gets disabled every time I click on the checkbox.
Any ideas how I can resolve this?
If your validation isnt more complex than shown in this sample code, you code turn it on and off using
<p:inputText id="inputText" disabled="#{bean.selectedObjectsMap[childItem]}" required="#{!bean.selectedObjectsMap[childItem]}" requiredMessage="value required" />
Meaning you toggle required attribute with same bean value as used for disabled attribute, just add a !
If you want to by pass validator on commandButton then you can implement
<f:validator validatorId="EmailValidator" disabled="#{param['disableValidation']}" />
Dynamically enable and disable email validator on form.
<p:commandButton
icon="ui-icon-remove" id="removeBtn"
title="#{commonLbl.cmdRemoveCon}"
disabled="#{pc_searchProspectBean.searchProspectVO.prospectVO.removeContactFlg}"
styleClass="btn btn-sm btn-primary"
action="#{pc_searchProspectBean.doRemoveContact(prospectTbl.indexId)}"
update=":frm1:pnlProspectContact" onclick="modalDialog.show()"
oncomplete="modalDialog.hide()">
<f:param name="disableValidation" value="true" />
</p:commandButton>