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
Related
I have a JSF application. In the home.xhtml, I have included 4 tabs. Each tab is a different xhtml form. The first form has an action listener. The problem is on all 4 tabs if I refresh (F5) the page, the action listener gets called.
On click of the command button, I check the DB to check if there are existing employees with the same details. If yes, I show the confirm dialog to proceed with Generation. If the user clicks Yes here, the new ID is generated. This generation function gets called again and again if I refresh the page. I made the call as ajax="false" as well but it does not help. If I make ajax="true", It does not let me change the tabs. The page sort of hangs. Please suggest me on how to stop this.
<h:form id="employeeIdGenerationForm" prependId="false">
<p:confirmDialog id="confirmationID" widgetVar="confirmationVar" header="Confirmation" showEffect="fade" hideEffect="explode"
message="#{employeeMaintenanceBean.employee.getWarningsList()}"
rendered="#{employeeMaintenanceBean.showExistingEmployeeWarning}" closable="false">
<p:commandButton value="Yes" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" onclick="PF('confirmationVar').hide()"
actionListener="#{employeeMaintenanceBean.generateEmployeeID}" ajax="false"
update="#form:confirmation #form:msgPanel_EmployeeIDGeneration #form:firstName #form:surName" />
<p:commandButton value="No" styleClass="ui-confirmdialog-no" icon="ui-icon-close" onclick="PF('confirmationVar').hide()"/>
</p:confirmDialog>
<p:panel styleClass="messagePanel"
style="color: #004986; font-size: 15px;"
header="New Employee ID Generation">
<br />
<h:panelGrid columns="1" id="msgPanel_EmployeeIDGeneration"
width="100%" align="center" style="text-align:center;">
<p:messages />
</h:panelGrid>
<h:panelGrid columns="2" border="0">
<h:outputLabel styleClass="label" value="First Name" />
<p:inputText value="#{employeeMaintenanceBean.employee.firstName}"
id="firstName" required="true"
requiredMessage="First Name is mandatory" maxlength="50"
styleClass="value" />
<h:outputLabel styleClass="label" value="Last Name" />
<p:inputText value="#{employeeMaintenanceBean.employee.lastName}"
id="surName" required="true"
requiredMessage="Last Name is mandatory" maxlength="50"
styleClass="value" />
<h:outputLabel styleClass="label" value="Comments" />
<p:inputTextarea
value="#{employeeMaintenanceBean.employee.comments}" id="comments"
maxlength="256" styleClass="value" />
<p:commandButton id="generateID" ajax="false"
actionListener="#{employeeMaintenanceBean.isExistingEmployee}"
title="Generate Employee ID" value="Generate Employee ID" update="#form:confirmationID #form:msgPanel_EmployeeIDGeneration">
</p:commandButton>
</h:panelGrid>
</p:panel>
</h:form>
The main home.xhtml is:
<h:head/>
<h:body>
<ui:composition template="/template/common/commonLayout.xhtml">
<ui:define name="content">
<p:idleMonitor timeout="300000">
<p:ajax event="idle" listener="#{baseBean.sessionTimeOut}"/>
</p:idleMonitor>
<p:tabView id="tabView" activeIndex="#{tabViewBean.mainTabActiveIndex}" dynamic="true" cache="false">
<p:ajax event="tabChange" listener="#{tabViewBean.onMainTabChange}" update="tabView" />
<p:tab id="employeeIdGeneration" title="New Employee ID Generation" rendered="#{tabViewBean.currentUser.hasAccessToPage('employeeIdGeneration')}">
<ui:include src="employeeIdGeneration.xhtml"/>
</p:tab>
<p:tab id="employeeMaintenance" title="Update New Employee Details" rendered="#{tabViewBean.currentUser.hasAccessToPage('employeeMaintenance')}">
<ui:include src="employeeIdMaintenance.xhtml"/>
</p:tab>
<p:tab id="employeeHistoryView" title="New Employee Update History" rendered="#{tabViewBean.currentUser.hasAccessToPage('employeeHistoryView')}">
<ui:include src="employeeHistoryView.xhtml"/>
</p:tab>
<p:tab id="userAccessMaintenance" title="User Access Maintenance" rendered="#{tabViewBean.currentUser.hasAccessToPage('userAccessMaintenance')}">
<ui:include src="userMaintenance.xhtml"/>
</p:tab>
</p:tabView>
</ui:define>
</ui:composition>
</h:body>
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.
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)
I am new to JSF/Java in general but have been trying to solve this for a few days now.
I have a form which gets stuck on validation. When all the entries are valid, it all works well. The minute I break validation (such as don't provide a required value), then the form gets stuck. One thing that happens is I cant correct the invalid entry it seems and repost. Also, where I had a cascading ajax call of a selectOneMenu, that suddenly starts failing...even though this is not the invalidated part of the form.
I notice that the cascading drop down seems to be throwing null pointer exceptions in its overridden equals method.
I am at a loss.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition template="/templates/layout.xhtml">
<ui:define name="content">
<p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>
<p:dialog modal="true" widgetVar="statusDialog" header="Status"
draggable="false" closable="false">
<p:graphicImage value="/resources/images/ajaxloadingbar.gif" />
</p:dialog>
<h:form id="form">
<p:panel id="panel"
header="Please ensure your personal details are accurate"
style="margin-bottom:10px;">
<p:messages id="msgs" />
<h:outputText
value="Please ensure your personal details are up to date and accurate within the Admin Direct system. Please note that this application only supports GMD customers, so unless you are within GMD, or are a user of the GMD Admin Direct service, please do not enter your details or attempt to use the application for administrative support." />
<h:panelGrid columns="3" cellpadding="5" id="grid">
<h:outputText value="First Name:" style="font-weight:bold" />
<p:inputText id="firstName"
value="#{personalDetailsBean.user.firstName}"
requiredMessage="First name is required..." style="width:250px" />
<p:message id="firstNameMessage" for="firstName" />
<h:outputText value="Last Name:" style="font-weight:bold" />
<p:inputText id="lastName"
value="#{personalDetailsBean.user.lastName}"
requiredMessage="Last name is required..." style="width:250px" />
<p:message id="lastNameMessage" for="lastName" />
<h:outputText value="Select Function:" style="font-weight:bold" />
<p:selectOneMenu id="functions"
value="#{personalDetailsBean.user.function}"
style="width:250px">
<f:selectItem itemLabel="Select Function" itemValue="" />
<f:selectItems value="#{personalDetailsBean.functions}" var="func"
itemLabel="#{func.functionName}" itemValue="#{func}" />
<f:converter converterId="functionConverter" />
</p:selectOneMenu>
<p:message id="functionMessage" for="functions" />
<h:outputText value="Select Site" style="font-weight:bold" />
<p:selectOneMenu id="sites"
value="#{personalDetailsBean.user.site}"
style="width:250px">
<f:selectItem itemLabel="Select Site" itemValue="" />
<f:selectItems value="#{personalDetailsBean.sites}" var="sit"
itemLabel="#{sit.siteName}" itemValue="#{sit}" />
<f:converter converterId="siteConverter" />
<p:ajax update="region" event="change" process="#this"/>
</p:selectOneMenu>
<p:message id="siteMessage" for="sites" />
<h:outputText value="Region" style="font-weight:bold" />
<h:outputText id="region"
value="#{personalDetailsBean.user.site.region.regionName}" />
<p:message id="regionMessage" for="region" />
<h:outputText value="Email" style="font-weight:bold" />
<p:inputText id="email" value="#{personalDetailsBean.user.email}"
required="true"
validatorMessage="Invalid email address format"
style="width:250px">
<f:validateRegex
pattern="[\w\.-]*[a-zA-Z0-9_]#[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
<f:validateLength minimum="2" />
</p:inputText>
<p:message id="emailMessage" for="email" />
</h:panelGrid>
<p:separator />
<p:commandButton value="Save" id="btnSubmit" actionListener="#{personalDetailsBean.saveUser}" process="#all" update="panel" />
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</html>
any advice greatly appreciated.
Regards
SM
I'm trying to implement ajax client side validation with jsf 2.0 (primefaces).
I prefer onblur event rather than ontype, because it seems more user friendly. The problem is: my Register button has to be clicked twice to work correctly when a focus is inside an invalid field. 1st time we click - onblur event happens, 2nd time we click - submit happens (i suggest this is the reason). My code:
<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition template="template.xhtml">
<ui:define name="content">
<p:panel header="#{msg['register']}" style="width: 550px; align: left;">
<h:form>
<h:panelGrid columns="3" cellpadding="2">
<h:outputLabel for="name" value="#{msg['yourName']}:" />
<p:inputText id="name" value="#{userManagedBean.name}">
<f:validateLength maximum="20" />
<p:ajax update="msgName" event="blur" />
</p:inputText>
<p:message for="name" id="msgName" display="text"/>
<h:outputLabel for="userName" value="*#{msg['login']}:"/>
<p:inputText id="userName" value="#{userManagedBean.username}" label="UserName" required="true">
<f:validateLength minimum="5" maximum="20" for="userName"/>
<p:ajax update="msgUserName" event="blur"/>
</p:inputText>
<p:message for="userName" id="msgUserName"/>
<h:outputLabel for="password" value="*#{msg['password']}:" />
<p:password id="password" value="#{userManagedBean.password}" required="true">
<f:validator validatorId="confirmPasswordValidator" />
<f:attribute name="confirm" value="#{confirmPassword.submittedValue}" />
<f:ajax event="blur" execute="password confirm" render="m_password" />
</p:password>
<p:message id="m_password" for="password" />
<h:outputLabel for="confirm" value="*#{msg['retypePassword']}:" />
<p:password id="confirm" binding="#{confirmPassword}" required="true">
<f:ajax event="blur" execute="password confirm" render="m_password m_confirm" />
</p:password>
<p:message id="m_confirm" for="confirm" />
<h:outputLabel for="email" value="#{msg['email']}:"/>
<p:inputText id="email" value="#{userManagedBean.email}" label="email">
<f:validateRegex pattern="^([a-zA-Z0-9_\-\.]+)#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" for="email"/>
<p:ajax update="msgEmail" event="blur"/>
</p:inputText>
<p:message for="email" id="msgEmail"/>
</h:panelGrid>
<ui:remove><p:captcha label="Captcha"/> </ui:remove>
<h:commandButton type="submit" value="#{msg['register']}" action="#{userManagedBean.register}"></h:commandButton>
</h:form>
</p:panel>
</ui:define>
</ui:composition>
</html>