I have a jsf Form with fields, submit and messages for it
<h:form id="loginForm">
<h:outputText value="Введите логин и пароль:"/>
<h:panelGrid columns="2">
<h:outputLabel for="email" value="E-Mail:"/>
<h:inputText id="email" value="#{sign.email}" required="true" requiredMessage="Введите e-mail" validatorMessage="email должен быть вида abc#abc.abc">
<f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]#[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
</h:inputText>
<h:outputLabel for="password" value="Password:"/>
<h:inputSecret converter="pwdConverter" id="password" value="#{sign.password}" required="true" requiredMessage="Введите пароль"/>
<h:commandButton action="#{sign.doLogin()}" value="Войти"/>
<h:commandLink action="/pages/register?faces-redirect=true" immediate="true" value="Зарегистрироваться"/>
</h:panelGrid>
<h:messages for="loginForm"/>
</h:form>
And it works fine: when I just click on the submit without input anything, it shows me a validation erros, but when I added a facebook-login button, I have a message in server log: Info: WARNING: FacesMessage(s) have been enqueued, but may not have been displayed.
sourceId=loginForm:email[severity=(ERROR 2), summary=(Введите e-mail), detail=(Введите e-mail)] for each field and validation messages not displayed on the page any more
there is how I added a fb-button:
<h:outputScript library="js" name="login.js"/>
<h:form id="loginForm">
<h:outputText value="Введите логин и пароль:"/>
<h:panelGrid columns="2">
<h:outputLabel for="email" value="E-Mail:"/>
<h:inputText id="email" value="#{sign.email}" required="true" requiredMessage="Введите e-mail" validatorMessage="email должен быть вида abc#abc.abc">
<f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]#[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
</h:inputText>
<h:outputLabel for="password" value="Password:"/>
<h:inputSecret converter="pwdConverter" id="password" value="#{sign.password}" required="true" requiredMessage="Введите пароль"/>
<h:commandButton action="#{sign.doLogin()}" value="Войти"/>
<h:commandLink action="/pages/register?faces-redirect=true" immediate="true" value="Зарегистрироваться"/>
</h:panelGrid>
<h:messages for="loginForm"/>
</h:form>
<br/>
<div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="true"></div>
<div id="status"/>
Related
I'm working on JSF form with field validation.
<h:form>
<h:panelGrid id="panel" styleClass="data_table_pricing" columns="3">
<h:outputText value="Title"/>
<h:inputText id="title" value="#{pricingForm.title}" validatorMessage="Value is too big.">
<f:validateLength minimum="0" maximum="40" />
<f:ajax event="change" render="#form"/>
</h:inputText>
<h:message id="title_message" for="title" style="color:red"/>
<!-- // -->
<h:outputText value="First name"/>
<h:inputText id="first_name" value="#{pricingForm.firstName}" validatorMessage="Value is too big.">
<f:validateLength minimum="0" maximum="40" />
<f:ajax event="change" render="#form"/>
</h:inputText>
<h:message id="first_name_message" for="first_name" style="color:red"/>
<!-- // -->
<h:outputText value="Last name"/>
<h:inputText id="last_name" value="#{pricingForm.lastName}" validatorMessage="Value is too big.">
<f:validateLength minimum="0" maximum="40" />
<f:ajax event="change" render="#form"/>
</h:inputText>
<h:message id="last_name_message" for="last_name" style="color:red"/>
<!-- // -->
</h:panelGrid>
<h:commandLink value="reset" class="link" type="reset" style="margin: 20px;">
<f:ajax execute="#form" render="#form"/>
</h:commandLink>
<h:commandLink value="Next" class="link" style="margin: 20px;" actionListener="#{pricingForm.calculatorPage()}">
<f:ajax execute="#form" render="#form"/>
</h:commandLink>
</h:form>
When I insert into several input fields big values I see only one error message. Looks like when the form is rendered the old values are not saved. San you help me to solve this?
This,
<f:ajax event="change" render="#form"/>
means the same as: "when the value of the current input is changed, submit and process only the current input and update the whole form".
So, other inputs aren't processed/validated, and the update basically clears out previous messages.
You likely meant to update only the associated message. E.g. in case of your first input:
<f:ajax render="title_message" />
I only omitted event="change" as that's the default already in <h:inputXxx> components.
See also:
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
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.
I'd like to display an error next to the fields that are wrong. I have that code for my page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="/WEB-INF/templates/basic.xhtml">
<ui:define name="content">
<h:form>
<h:panelGrid columns="3">
<h:outputText value="Firstname"/>
<h:inputText id="firstName" value="#{account.firstName}" required="true">
<f:validator validatorId="stringAlphaValidator"/>
</h:inputText>
<h:message for="firstName" errorStyle="color:red; display:block"/>
<h:outputText value="Lastname"/>
<h:inputText id="lastName" value="#{account.lastName}" required="true">
<f:validator validatorId="stringAlphaValidator"/>
</h:inputText>
<h:message for="lastName" errorStyle="color:red; display:block"/>
<h:outputText value="Login"/>
<h:inputText id="login" value="#{account.login}" required="true">
<f:validator validatorId="stringAlphaValidator"/>
</h:inputText>
<h:message for="login" errorStyle="color:red; display:block"/>
<h:outputText value="Password"/>
<h:inputText id="password" value="#{account.password}" required="true">
</h:inputText>
<h:message for="password" errorStyle="color:red; display:block"/>
<h:outputText value="Address"/>
<h:inputText id="address" value="#{account.address}" required="true">
<f:validator validatorId="stringAlphaNumericValidator"/>
</h:inputText>
<h:message for="address" errorStyle="color:red; display:block"/>
<h:outputText value="Email"/>
<h:inputText id="email" value="#{account.email}" required="true">
<f:validator validatorId="emailAddressValidator"/>
</h:inputText>
<h:message for="email" errorStyle="color:red; display:block"/>
</h:panelGrid>
<h:commandButton value="Register"/>
<h:messages globalOnly="true"/>
</h:form>
</ui:define>
</ui:composition>
</html>
If a field is empty and I press the Register button, I get that (here all fields are empty):
(sorry the error is in french. I don't know if it comes from my eclipse language or my tomcat server)
I didn't write this ! This is a text that my program writes on it's own somehow... How do I remove this ?
Also, this is a register page, I'd like to add to my DB the user (if the fields are right) and then change of page with the action login. How can I call a method to do that before it changes of page ?
If you need to see more code, like the validator classes, I can add it.
This should work.
<h:inputText id="lastName" value="#{account.lastName}" required="true" requiredMessage="Please enter your Lastname">
And the fields you validate, you can add a validatorMessage="<Message>"
** UPDATE *
If you want to use Bean Validation, like described in my comment,go this way:
// for example your NamesBean
#Named(value = "namesBean")
#SessionScoped
public class NamesBean {
// attributes
public void setFirstName(String firstName) {
this.firstName = firstName;
}
#Size(min=3, max=10, message="Min 3 and max 10 characters")
public String getFirstname() {
return firstName;
}
}
and the xhtml
<h:message for="lastName"/>
<h:inputText id="lastName" value="#{account.lastName}" required="true" requiredMessage="Please enter your Lastname">
Thats it.
I managed it this way (personnaly) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="/WEB-INF/templates/basic.xhtml">
<ui:define name="content">
<h:form>
<h:panelGrid columns="3">
<h:outputText value="Firstname"/>
<h:inputText id="firstName" value="#{account.firstName}" required="true" requiredMessage="The field is empty" validatorMessage="String is not valid (only characters a-z A-Z)">
<f:validateRegex pattern="[a-zA-Z]+"/>
</h:inputText>
<h:message for="firstName" errorStyle="color:red; display:block"/>
<h:outputText value="Lastname"/>
<h:inputText id="lastName" value="#{account.lastName}" required="true" requiredMessage="The field is empty" validatorMessage="String is not valid (only characters a-z A-Z)">
<f:validateRegex pattern="[a-zA-Z]+"/>
</h:inputText>
<h:message for="lastName" errorStyle="color:red; display:block"/>
<h:outputText value="Login"/>
<h:inputText id="login" value="#{account.login}" required="true" requiredMessage="The field is empty" validatorMessage="String is not valid (only characters a-z A-Z 0-9)">
<f:validateRegex pattern="[a-zA-Z0-9]+"/>
</h:inputText>
<h:message for="login" errorStyle="color:red; display:block"/>
<h:outputText value="Password"/>
<h:inputSecret id="password1" value="#{account.password1}" required="true" requiredMessage="Enter a password">
</h:inputSecret>
<h:message for="password1" errorStyle="color:red; display:block"/>
<h:outputText value=""/>
<h:inputSecret id="password2" value="#{account.password2}"/>
<h:outputText value=""/>
<h:outputText value="Address"/>
<h:inputText id="address" value="#{account.address}" required="true" requiredMessage="The field is empty" validatorMessage="Wrong address (eg.: 42bis My address)">
<f:validateRegex pattern="[a-zA-Z0-9]+ [a-zA-Z ]+"/>
</h:inputText>
<h:message for="address" errorStyle="color:red; display:block"/>
<h:outputText value="Email"/>
<h:inputText id="email" value="#{account.email}" required="true" requiredMessage="The field is empty" validatorMessage="The email is not valid">
<f:validateRegex pattern="^[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$"/>
</h:inputText>
<h:message for="email" errorStyle="color:red; display:block"/>
</h:panelGrid>
<h:commandButton value="Register" action="#{account.action}"/>
<h:messages globalOnly="true"/>
</h:form>
</ui:define>
</ui:composition>
</html>
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" />
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>