primefaces p:fileUpload validation always shows default - validation

I don't know how to custom validate primefaces p:fileUpload.
My code xhtml is:
<h:form id="agruparCVForm" styleClass="validacionform" enctype="multipart/form-data">
<p:messages id="messages" showDetail="false" autoUpdate="true" closable="true" escape="false"/>
<fieldset>
<div class="col">
<div class="dtPadding_bottom">
<p class="parrafoMargintop1em textSmall">
<h:outputText value="#{comunidadesBundle.textoAdjuntarDocumentoAsociar}" escape="false"/>
</p>
<p:fileUpload value="#{agruparComunidadController.comunidadAAgrupar.documentoAutorizacion}" mode="simple" skinSimple="true" required="true"/>
</div>
</div>
</fieldset>
<div class="float-cleaner marginTopBottom2em"></div>
<!-- Botones-->
<div class="ftr">
<h:commandButton value="#{comunidadesBundle.guardarCambiosBtn}" title="#{comunidadesBundle.guardarCambiosBtn}" action="#{agruparComunidadController.agrupar}" styleClass="buttonContrast azul textSmaller MarginBottom2em floatRMobile"/>
</div>
</h:form>
The action="#{agruparComunidadController.agrupar}" never gets called as the jsf validation is performed before getting the standard message from the api.
The question is how can I put a customized error message?
I'm new to primefaces and I don't know how it gets valiated.
I need to validate this field when the form get's submitted. So it should check if the field is empty and display the custom message instead of the standard message choose:.....
Thank you in advance.

Related

Ajax validation on form submit

I am new in jsf using 2.2.12 version.
I have some problem in performing actions
1). I am getting a list of things and I need to show that list in as autocomplete. I did enough google and I found this things is for primefaces not able to find some helpful in jsf.
2). I have form with multiple fields(input box,password and checkbox). I need to validate some form fields like password and conform password matching and email structure etc. I am able to perform validation by custom validator. Now my requirement is if validation fails on form fields then ajax should not be submitted by clicking on submit button of form. The form is submitted by ajax request also.
Below is my form code.
<div class="email-signup" id="email-signup">
<h:form id="signupForm">
<div class="form-group">
<h:inputText value="#{userRegister.userName}" placeholder="username" class="input-text full-width" />
</div>
<div class="form-group">
<h:inputText value="#{userRegister.firstName}" placeholder="first name" class="input-text full-width" />
</div>
<div class="form-group">
<h:inputText placeholder="last name" value="#{userRegister.lastName}" class="input-text full-width" />
</div>
<div class="form-group">
<h:inputText id="email" value="#{userRegister.email}" validatorMessage="Wrong formatted email entered" class="input-text full-width" placeholder="email address">
<!-- <f:validator validatorId="emailValidator"/> -->
<f:validateRegex pattern="^\w+#[a-zA-Z_]+?\.[a-zA-Z]{2,3}$" />
<f:ajax event="blur" render="emailMessage" />
</h:inputText>
<h:message id="emailMessage" for="email" style="color:red"/>
</div>
<div class="form-group">
<h:inputSecret id="password" value="#{userRegister.password}" class="input-text full-width" placeholder="password">
</h:inputSecret>
</div>
<!--<h:outputLabel for="confirm" value="Confirm password" />-->
<div class="form-group">
<h:inputSecret id="confirm" binding="#{confirm}" class="input-text full-width" placeholder="confirm password"/>
</div>
<div class="form-group">
<div class="checkbox">
<h:outputLabel>
<h:selectBooleanCheckbox/> Tell me about Chameleon news
</h:outputLabel>
</div>
</div>
<div class="form-group">
<p class="description">By signing up, I agree to Chameleon's Terms of Service, Privacy Policy, Guest Refund Policy, and Host Guarantee Terms.</p>
</div>
<h:commandButton value="SIGNUP" class="full-width btn-medium">
<f:ajax execute="signupForm" render="outputMessage" valueChangeListener="#{userRegister.getCallUserRegisterService}" onevent="showSignUpMessage" />
<h:outputText class="signup_message" id="outputMessage" value="#{userRegister.message !=null ? userRegister.message : ''}"/>
</h:commandButton>
</h:form>
</div>
Please have a look on above problems.
First of all I do not recommend to use JSF as frontend framework with ajax. We have project with JSF2.2 + primefaces and we are dealing with a lot of JSF lacks. JSF wasn't designed for ajax and it have more and more problems when you are trying to create a single page application with it.
If you have to use jsf - you must now that components libraries are your friends :). For autocomplete you can use eg:
primefaces autocomplete
rich faces
ice faces
You can of course write your own component but you already have in opensource libraries - I recommend PrimeFaces.
Your second problem
The best way is to use already existing command button in primefaces which has attribute ajax which defines if your action should be invoked by ajax or by standard request.
<p:commandButton value="Non-Ajax Submit" id="nonAjax" actionListener="#{buttonView.buttonAction}" ajax="true" />
If set ajax to true then your action will be performed by ajax request and if validation fails in the response you will get validation errors. You have also notice that command button have attribute "update" which should contain list of elements which should be updated after action proceed eg
<p:commandButton value="Non-Ajax Submit" id="nonAjax" actionListener="#{buttonView.buttonAction}" ajax="true" update="#form"/>
after this action whole form will be updated

ajax validation error message [duplicate]

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.

How to update specific values of a form after ajax actionListener call?

My main form is the following:
<h:form id="frmSearch" styleClass="m-bottom">
<div class="form-group">
<label>Funcionário</label>
<h:inputText id="funcionario" value="#{escalaTrabalhoBean.entityToSearch.funcionario.pessoa.nome}" readonly="true" styleClass="form-control" />
<h:commandButton id="btnFuncionario" styleClass="btn btn-default" value="Buscar funcionário" onclick="$('#modBuscaFuncionario').modal('show')" type="button" />
</div>
</h:form>
And I want to update the value of field "funcionario" after I call a function with ajax, which is inside a modal window:
<h:form id="frmSearchBuscaFuncionario">
<h:commandLink id="btnSelecionar" title="Selecionar" actionListener="#{escalaTrabalhoBean.selectFuncionario(obj)}">
<i class="fa fa-pencil-square-o"></i>
<p:ajax oncomplete="$('#modBuscaFuncionario').modal('hide');" update="frmSearch:funcionario" />
</h:commandLink>
</h:form>
This code: update="frmSearch:funcionario" is not working, and I got this error: javax.faces.FacesException: Cannot find component with identifier "frmSearch:funcionario".
Any suggestions?
When you access the components outside of your current h:form use : at the beginning of the Id of the component.
In your example:
update=":frmSearch:funcionario"

p:fileUpload not working after rendered by p:ajax

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.

How to block negative numbers on h:inputText with JSF

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.

Resources