Primefaces password match on blur always validation error - ajax

Using primefaces password tag, I want to use the match as shown in the show case but with on blur validation, I use the following code:
<h:form id="formulaire">
<p:growl id="growl" showDetail="true" autoUpdate="true" />
...
<p:password id="pwd1" value="#{registrationBean.user.password}"
size="47" label="Password" required="true"
placeholder="Password*" >
<f:validateLength minimum="6" />
<p:ajax event="blur"/>
</p:password>
<br />
<p:password id="pwd2" value="#{registrationBean.user.password}"
size="47" label="Verification" required="true"
placeholder="Verification*" match="pwd1">
<p:ajax event="blur"/>
</p:password>
<br/>
<p:commandButton action="#{registrationBean.register}" value="register"/>
</h:form>
I use the match on the verification, to avoid displaying the error message
before trying to reproduce it.
the problem is that growl always displays the error message.
Even when I put the match on the first field, the growl error keeps showing.
Thank you for your help.
Edit:
The Best solution I managed to get is the following:
<p:password id="pwd1" value="#{registrationBean.password}"
size="47" label="Password" required="true"
placeholder="Password*" match="pwd2">
<f:validateLength minimum="6" />
</p:password>
<br />
<p:password id="pwd2" value="#{registrationBean.password}"
size="47" label="Verification" required="true"
placeholder="Verification*" >
<p:ajax process="pwd1 pwd2" event="blur"/>
</p:password>
the draw back is that there is no ajax verification after password is entered (length...), this is done only once the verification is entered.
(still looking for a better solution)

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.

Custom validator not invoked when fields are empty

I have implemented a custom validator for my screen referring to the example given here.
But in my case, my validator method is not invoked if I don't enter any values in any of the field. So the check for empty fields is never done. The required messages are displayed everytime.
If I removed the required attributes, even in that case the validator is invoked only if the fields have some value in them. How do I get all my validations to be done in the validator class?
My xhtml:
<h:form>
<p:messages id="message" closable="true"/>
<h:panelGrid columns="3" id="changePassPanel">
<h:outputLabel for="pwd0" value="Current password :" />
<p:password id="pwd0" value="#{homeBean.password1}">
<f:validator validatorId="PasswordValidator"></f:validator>
<f:attribute name="pwd1" value="#{pwd1}" />
<f:attribute name="pwd2" value="#{pwd2}" />
</p:password>
<h:outputLabel for="pwd1" value="New password :" />
<p:password id="pwd1" value="#{homeBean.password2}" binding="#{pwd1}"/>
<h:outputLabel for="pwd2" value="Confirm new password :" />
<p:password id="pwd2" binding="#{pwd2}"/>
</h:panelGrid>
<p:commandButton id="saveButton" value="Save" validateClient="true"/>
</h:form>

JSF Validate on keyup event

i want to implement a validation for a username. The 'normal' way to do it
is something like that:
<h:outputText for="username" value="Username:" />
<p:inputText id="username" value="#{registerService.username}" >
<f:validator binding="#{usernameValidator}" />
</p:inputText>
<p:message for="username" />
<p:commandButton type="submit" value="Submit" action="#{registerService.addUser}" ajax="false" update="panel" validateClient="true" />
But what i now want to do is to validate the username everytime
the user presses a key in the username inputText without pressing
the commandButton.
So each character should trigger the validation and should update
the messages field for username to show the user instantly if the
username is already present in database or not.
How can i do that?
Found:
Ajax Listener
This triggers the validation!
<h:inputText id="foo" value="#{bean.foo}">
<f:ajax event="keyup" execute="#this" render="fooMessage" />
<f:validator validatorId="fooValidator" />
</h:inputText>
<h:message id="fooMessage" for="foo" />

Disable validation errors from showing to users Webpage

i have a webpage with some validation, and when the users enters in a wrong user name it tells them through ajax primefaces growl, this is working fine however in red at the top right of the form the error message appears as well, not in ajax, is there any way to stop this ?
here is the image
http://i1081.photobucket.com/albums/j348/west-wot/errror_zpsda7f29d7.jpg
it probs shows what i mean a lot better than my explaining, the error is not an error in the code just a validation error
added an image so you can see what the errors i mean, the ajax to the left is fine it is just the right hand side error messages i would like to hide
the code is
<ui:define name="body">
<!--<h:panelGroup id="messagePanel" layout="block">
<h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
</h:panelGroup> -->
<h:form>
<p:growl id="growl" showDetail="true" sticky="true" />
<!--ajax messages working now -->
<p:panel header="Enter details">
<h:panelGrid columns="2">
<h:outputLabel value="#{bundle.CreateUserdetailsLabel_id}"
for="id" />
<h:inputText id="id"
value="#{userdetailsController.selected.id}"
title="#{bundle.CreateUserdetailsTitle_id}" required="true"
requiredMessage="#{bundle.CreateUserdetailsRequiredMessage_id}" />
<h:outputLabel value="#{bundle.CreateUserdetailsLabel_username}"
for="username" />
<h:inputText id="UserName"
value="#{userdetailsController.selected.username}"
title="#{bundle.CreateUserdetailsTitle_username}"
required="true" requiredMessage="Username is required"
label="UserName">
<f:validator validatorId="richard.validator.UserNameValidator" />
</h:inputText>
</h:panelGrid>
<br />
<h:commandLink action="#{userdetailsController.create}"
value="#{bundle.CreateUserdetailsSaveLink}" />
<br />
<br />
<h:commandLink action="#{userdetailsController.prepareList}"
value="#{bundle.CreateUserdetailsShowAllLink}" immediate="true" />
<br />
<br />
<h:link outcome="/index"
value="#{bundle.CreateUserdetailsIndexLink}" />
</p:panel>
as you can see from the above code the error messages is commented out so should not effect things
Try adding "globalOnly=true" to your growl.
<p:growl id="growl" showDetail="true" sticky="true" globalOnly="true" />
stackoverflow.com/a/15599070/2755755

Trigger OmniFaces multi field validation after focus lost

I need to create a validation on Calendar components - Begin/End. OmniFaces supports multi field validation very well, like here:
<h:panelGrid columns="3">
<h:outputLabel for="startDate" value="Start date" />
<h:inputText id="startDate" value"#{booking.reservation.startDate}" required="true"
requiredMessage="Please enter start date"
converterMessage="Please enter format yyyy-MM-dd">
<f:convertDateTime pattern="yyyy-MM-dd" />
</h:inputText>
<h:message for="startDate" />
<h:outputLabel for="endDate" value="End date" />
<h:inputText id="endDate" value"#{booking.reservation.endDate}" required="true"
requiredMessage="Please enter end date"
converterMessage="Please enter format yyyy-MM-dd">
<f:convertDateTime pattern="yyyy-MM-dd" />
</h:inputText>
<h:panelGroup>
<h:message for="endDate" />
<h:message for="order" />
<o:validateOrder id="order" components="startDate endDate"
message="End date must be after start date" />
</h:panelGroup>
</h:panelGrid>
<h:commandButton value="submit" action="#{booking.submit}">
<f:ajax execute="#form" render="#form" />
</h:commandButton>
But, In this example validation is triggered after manually submit. And I need to validate after focus (of Calendar) is lost. How can I achieve that? Thanks.
The multi field validators from OmniFaces can be referenced in <f:ajax execute>. The "focus lost" event is the blur event. Thus, this should do:
<h:inputText ...>
<f:ajax event="blur" execute="startDate endDate order" render="m_startDate m_endDate m_order" />
</h:inputText>
where m_startDate, etc are the IDs of the <h:message> components like so
<h:message id="m_startDate" for="startDate" />

Resources