Show value in validatorMessage - primefaces

I am using a validatorMessage for a regex I have for an email input, but I want to show the current value from the input in the message, at the place {0}.
But if I used the variable that is declared in the bean it doesn't work, because it doesn't process the variables because there is an validation error. How would I show the current value in the input in the validatorMessage?
Note: {0} is used in the PrimeFaces locales for the current value with validating.
<p:inputText id="email" value="#{registerBean.email}" type="email" label="#{bundle.register_email}" required="true" style="width: 100%;" validatorMessage="#{bundle.register_email}: '{0}' #{bundle.register_email_error}">
<f:validateRegex pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*#[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
</p:inputText>

The solution I propose is to use a custom "messages.properties" file and overwrite the default messages of JSF API.
For an example of this file please redirect to: jsf-api-2.x.jar, "javax \ faces \ Messages.properties".
Take for example the two values found in the file messages.properties
javax.faces.validator.LengthValidator.MAXIMUM={1}: Validation Error: Length is greater than allowable maximum of ''{0}''
javax.faces.validator.LengthValidator.MINIMUM={1}: Validation Error: Length is less than allowable minimum of ''{0}'
For example,
If maximum length validation failed, JSF gets “javax.faces.validator.LengthValidator.MAXIMUM”.
If minimum length validation failed, JSF gets “javax.faces.validator.LengthValidator.MINIMUM”.
Personalized Message
Create a file (with any name) for exemple: myMessages.properties and place them in a specific package in your source folder.
Place in all the messages you find in the file of the messages.properties jsf-api-api 2.x.jar .
Then change the message as you like, for example:
javax.faces.validator.LengthValidator.MAXIMUM=My custom message 1
javax.faces.validator.LengthValidator.MINIMUM=My custom message 2
Register Message Bundle
Register your custom properties file in “faces-config.xml”, put it as Application level.
faces-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<faces-config
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
version="2.0">
<application>
<message-bundle>
package.name.MyMessage
</message-bundle>
</application>
Demo
<h:form>
<h:panelGrid columns="3">
Enter your username :
<h:inputText id="username" value="#{user.username}"
size="20" required="true" label="Username">
<f:validateLength minimum="5" maximum="10" />
</h:inputText>
<h:message for="username" style="color:red" />
Enter your DOB :
<h:inputText id="dob" value="#{user.dob}"
size="20" required="true" label="Date of Birth">
<f:convertDateTime />
</h:inputText>
<h:message for="dob" style="color:red" />
</h:panelGrid>
<h:commandButton value="Submit" action="result" />
</h:form>
The source : click here

Related

Using Omnifaces validateAllOrNone component into ui:repeat

I have the following problem:
I try to use o:validateAllOrNone component into ui:repeat and it's work nice. But it doesn't work with my composite component.
My composite component it's really the simple p:inputText for comfortable input phone number. There I have used javascript which provides work with different phone numbers (inputPhoneNumber).
<p:inputText id="#{cc.attrs.id}" type="tel" label="Номер телефона" value="#{cc.attrs.value}" required="#{cc.attrs.required}"
styleClass="#{cc.attrs.styleClass} m-pad-left50" style="#{cc.attrs.style}">
</p:inputText>
<script>
$("#{cc.fullId}").intlTelInput(
{
utilsScript: "intl-tel-input/js/utils.js",
autoHideDialCode: false,
nationalMode: false,
preferredCountries: [#{cc.preferredCountries}],
onlyCountries: [#{cc.countries}],
dropdownContainer: 'body'
}
);
</script>
Also I have the form to create contacts such as phone number, email, skype and et. The form allows to create list of contacts. And there I have used my composite component if category of contact is phone number else simple input text:
<ui:repeat value="#{bean.contacts}" var="contact">
<p:selectOneMenu id="contact_type" value="#{contact.type}">
...
</p:selectOneMenu>
<p:outputPanel rendered="#{contact.category.equals(category.PHONE)}">
<mycomponent:inputPhoneNumber id="contact_phone_value" value="#{contact.value}" preferred="ru">
<o:validateAllOrNone components="contact_type contact_phone_value"/>
</p:outputPanel>
<p:outputPanel rendered="#{ne contact.category.equals(category.PHONE)}">
<p:inputText id="contact_other_value" value="#{contact.value}"/>
<o:validateAllOrNone components="contact_type contact_other_value"/>
</p:outputPanel>
</ui:repeat>
I have used o:validateAllOrNone to check that contact type and his value not empty. It works for p:inputText but when I have tried to used this component for mycomponent:inputPhoneNumber I have caught the following exception:
Exception message: ValidateAllOrNone attribute 'components' must refer
existing client IDs. Client ID 'contact_type' cannot be found.
I have found the question the question where I have known how to get full into ui:repeat. After that I have rewritten my code:
<ui:repeat id="contact_list" value="#{bean.contacts}" var="contact" varStatus="status">
<p:selectOneMenu id="contact_type" value="#{contact.type}">
...
</p:selectOneMenu>
<p:outputPanel rendered="#{contact.category.equals(category.PHONE)}">
<mycomponent:inputPhoneNumber id="contact_phone_value" value="#{contact.value}" preferred="ru">
<o:validateAllOrNone components="contact_creation_form-contact_list-#{status.index}-contact_type contact_phone_value"/>
</p:outputPanel>
<p:outputPanel rendered="#{ne contact.category.equals(category.PHONE)}">
<p:inputText id="contact_other_value" value="#{contact.value}"/>
<o:validateAllOrNone components="contact_type contact_other_value"/>
</p:outputPanel>
</ui:repeat>
Now I have put the correct id for contact type, but I caught the same exception:
Exception message: ValidateAllOrNone attribute 'components' must refer
existing client IDs. Client ID
'contact_creation_form-list-2-contact_type' cannot be found.
How can I fix this proglem?
I should went from other side. It's easy to get the full id for the composite component and use it at o:validateAllOrNone. It fixed the problem. The correct id for composite component in this case it is contact_phone_value-contact_phone_value. After that code lookes like:
<ui:repeat value="#{bean.contacts}" var="contact">
<p:selectOneMenu id="contact_type" value="#{contact.type}">
...
</p:selectOneMenu>
<p:outputPanel rendered="#{contact.category.equals(category.PHONE)}">
<mycomponent:inputPhoneNumber id="contact_phone_value" value="#{contact.value}" preferred="ru">
<o:validateAllOrNone components="contact_type contact_phone_value-contact_phone_value"/>
</p:outputPanel>
<p:outputPanel rendered="#{ne contact.category.equals(category.PHONE)}">
<p:inputText id="contact_other_value" value="#{contact.value}"/>
<o:validateAllOrNone components="contact_type contact_other_value"/>
</p:outputPanel>
</ui:repeat>
Also you should know that I use '-' instead ':' for id delimeter.

client validation in p:messages with "for" attribute

The follwing is work fine. the client validation error shows in p:messages
<p:panelGrid >
....
....
....
<p:commandButton value="Save" validateClient="true" update="save-gje"
action="#{generalJournalEntryMB.AddGeneralJournalEntry}" ajax="true" process="top-menu-and-form" />
</p:panelGrid>
<p:messages closable="true" id="save-gje" />
but when I add "for" attribute , its not working for client validation.
<p:messages closable="true" id="save-gje" for="save-gje" />
how can I show client validation in p:messages with "for" attribute?

how to run jsf output from returned ManagedBean?

I have a JSF form and the following code
<h:form>
<h:inputText id="name" value="#{denee.name}" />
<h:inputText id="pw" value="#{denee.password}" />
<h:commandButton id="ahmet" value="Submit" action="#{denee.den4()}"/>
</h:form>
Here is my ManagedBean code. It returns success.xhtml and changes value2
public String den4() {
value2="<h:commandButton id=\"buttonsd\" value=\"Submit\" action=\"#{denee.den4()}\"/>" ;
return "success.xhtml";
}
And here is success.xhtml
<h:outputText escape="false" value="#{denee.value2}" />
When I run my program I can see the JSF commandbutton in the code, but not on the actual page.

Reset input fields in primefaces

I have a Dialog to input details. At the first time , InputText are empty.
But from the second input, InputText maintain the previous value.
This is my code :
<p:commandButton id="showDialogButton1" type="button" value="add" onclick="dlg1.show()" update="firstname1"/>
<p:dialog id="dialogAjout" header="add department" widgetVar="dlg1" resizable="false">
<h:panelGrid columns="2" style="margin-bottom:10px">
<h:outputLabel for="firstname1" value="Libellé :" />
<p:inputText id="firstname1" value="#{departementBean.departement.libelleDepartement}" />
</h:panelGrid>
<p:commandButton id="submitButton1" value="Valider" oncomplete="dlg1.hide();" action="#{departementBean.addDept()}" update="tabView"/>
</p:dialog>
How can I resolve this, please !!
You can use this primefaces component:
http://www.primefaces.org/showcase/ui/misc/resetInput.xhtml
Regarding dialogs in general: don't put them inside forms.
Have this instead: <p:dialog><h:form>...
Regarding update="" values, if your appendToBody is true, put a colon in front of the id (that means it`s in another form).
You should use the following code:
<h:commandButton value="Reset" style="margin-right:20px;">
<p:ajax update="registrationForm" resetValues="true" />
</h:commandButton>
Add resetValues="true" to your commandButton
<p:commandButton resetValues="true" action="#{departementBean.prepareDialog}" id="showDialogButton1" type="button" value="add" oncomplete="dlg1.show()" update=":dialogAjout"/>
modify you open button like this : open dialog in oncomplete and before that update it by adding its id to update attribute and add action method to do the server side logic to actually init the dialog fields (populate / reset)
<p:commandButton action="#{departementBean.prepareDialog}" id="showDialogButton1" type="button" value="add" oncomplete="dlg1.show()" update=":dialogAjout"/>
b.t.w it looks like your dialog located inside your form together with your opening button , this is a "bad practice" move your dialog away from that form and place a new form inside the dialog , e.g <p:dialog><h:form> ...
I solved this question thus
<p:dialog header="myDialog" widgetVar="dlg1" minHeight="40">
<h:outputLabel for="fild1" value="Fill the field" />
<p:password id="fild1" value="#{myBean.attribute}" required="false" label="Field" redisplay="false" /><br />
<p:commandButton action="#{myBean.method()}" value="Send" oncomplete="dlg1.hide()" update="field1" />
</p:dialog>
When I used the attribute update="field1" of p:commandButton.
The value of field p:password will empty after submitting the form.
I tried do the suggestion of Dani but my attribute going empty when I submitted my form and not stayed empty after submit

rich:hotKey for Form Submission?

I've got a login form that looks something like this, using RichFaces and Seam:
<h:form id="loginForm">
<h:outputLabel value="Username" />
<h:inputText value="#{identity.credentials.username}" />
<h:outputLabel value="Password" />
<h:inputText value="#{identity.credentials.password}" />
<h:commandLink action="#{identity.login()}" value="Login" />
</h:form>
I'd like to be able to allow the user to hit 'enter' and automatically submit the form to login. I've tried using Richfaces' <rich:hotKey /> feature, but I think I'm doing something wrong. The code I've put in looks like this:
<rich:hotKey key="return"
handler="#{rich:element('loginForm')}.submit()" />
However, when I hit enter inside the form, nothing happens. Any idea what I'm doing wrong here?
I think you need to use selector property. Something like,
<rich:hotKey key="return"
handler="#{rich:element('loginForm')}.submit()"
selector="#loginForm"/>
Also, instead of submitting the form, you should click submit button. Something like,
<rich:hotKey key="return"
handler="#{rich:element('loginButton')}.click()"
selector="#loginForm"/>
Try the following code. I hope you can get some idea..
<body>
<h:form id="loginForm">
<h:outputLabel value="Username : " />
<h:inputText id="userNameId" value="#{Login.username}" />
<h:outputLabel value="Password : " />
<h:inputText id="passwordId" value="#{Login.password}" />
<a4j:commandButton id="loginButton" action="#{Login.loginButton}" value="Login" focus="button"/>
<rich:hotKey key="return"
selector="#userNameId"
handler="#{rich:element('loginForm:loginButton')}.click();
event.stopPropagation();event.preventDefault();
return false;"/>
<rich:hotKey key="return"
selector="#passwordId"
handler="#{rich:element('loginForm:loginButton')}.click();
event.stopPropagation();event.preventDefault();
return false;"/>
</h:form>
</body>
For all those still struggling with this issue, I've finally gotten something that works. My code now looks like this:
<h:form id="loginForm">
<h:outputLabel value="Username" />
<h:inputText value="#{identity.credentials.username}" />
<h:outputLabel value="Password" />
<h:inputText value="#{identity.credentials.password}" />
<h:commandLink action="#{identity.login()}" value="Login" />
<rich:hotKey key="return"
handler="#{rich:element('loginForm')}.submit()"
selector="#loginForm"/>
</h:form>
You can also use a more specific selector so that an enter press only submits the form when the focus is on one of the form fields. Either way, this FINALLY solved my problem.