I am trying out the Omnifaces validators especially the validateEqual and so I created a test page such as this.
<p:messages autoUpdate="true" showDetail="false" />
<h:form id="registerForm" prependId="false">
<p:panelGrid columns="2" styleClass="register-grid">
<h:outputLabel for="password" value="Password *" />
<p:inputText id="password" value="" label="Password"
requiredMessage="Password is required" size="30">
<f:validateRequired />
</p:inputText>
<h:outputLabel for="confirmPassword" value="Confirm Password *"
requiredMessage="Confirm Password is required" />
<p:inputText id="confirmPassword" value="" label="Confirm Password" requiredMessage="Confirm password is required"
size="30">
<f:validateRequired />
</p:inputText>
<o:validateEqual components="password confirmPassword" message="Passwords are not equal"/>
<f:facet name="footer">
<p:commandButton value="Register" action="/pages/public/login"/>
<p:commandButton value="Cancel" immediate="true" action="/pages/public/login"/>
</f:facet>
</p:panelGrid>
</h:form>
Not sure but nothing is happening and I see from firebug below error.
<partial-response>
<error>
<error-name>class javax.faces.component.UpdateModelException</error-name>
<error-message>/pages/public/register.xhtml #26,57 value="": Illegal Syntax for Set Operation</error-message>
</error>
<changes>
<extension ln="primefaces" type="args">{"validationFailed":true}</extension>
</changes>
</partial-response>
What could be the cause?
/pages/public/register.xhtml #26,57 value="": Illegal Syntax for Set Operation
This is basically telling that it's not possible to perform a "set" operation (a setter method call) on an empty value expression.
Either remove the value attribute altogether (at least from the "confirm" field), or specify a valid value expression such as value="#{bean.password}" (at least for the first field). So, basically:
<p:inputText id="password" value="#{bean.password}" label="Password"
requiredMessage="Password is required" size="30" required="true" />
<p:inputText id="confirmPassword" label="Confirm Password"
requiredMessage="Confirm password is required" size="30" required="true" />
<o:validateEqual components="password confirmPassword"
message="Passwords are not equal" />
This has nothing to do with using <o:validateEqual>. You'd have exactly the same problem when not using it. You may however want to use OmniFaces FullAjaxExceptionHandler in order to get a real error page on an exception during an ajax request instead of complete lack of visual feedback.
Related
I have a code which is for a Registration Form. There are some fields and a Submit button of type <p:commandButton>.Now when I submit the button it shows a datatable under the form which renders the values of the input filed.
I want to clear the input text fields after the form submit. But the values remains.
How can I clear the values of the text fields of the form?
<p:panel header="Registration Form" closable="true" closeSpeed="100" toggleable="true" toggleSpeed="100" toggleOrientation="vertical">
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel value="*First Name"/>
<p:inputText id="firstname" value="#{registrationDetails.firstName}" required="true" label="First Name" requiredMessage="First Name required!"/>
<p:outputLabel value="*Last Name"/>
<p:inputText id="lastname" value="#{registrationDetails.lastName}" required="true" label="Last Name" requiredMessage="Last Name required!"/>
<p:outputLabel value="Location"/>
<p:selectOneMenu id="location" value="#{registrationDetails.location}">
<f:selectItem itemLabel="Select Location" itemValue=""/>
<f:selectItems value="#{registrationDetails.locations}"/>
</p:selectOneMenu>
<p:outputLabel id="email" value="*Email"/>
<p:inputText value="#{registrationDetails.email}" required="true" label="Email" requiredMessage="Email address required!"/>
<p:outputLabel value="*Contact Number"/>
<p:inputText id="contactNumber" value="#{registrationDetails.contactNumber}" autocomplete="false" maxlength="10" required="true" label="Contact Number" requiredMessage="Contact Number required!"/>
<p:outputLabel value="Address"/>
<p:inputTextarea value="#{registrationDetails.address}"/>
</h:panelGrid>
<p:commandButton value="Submit" actionListener="#{registrationDetails.formSubmit}" id="buttonSubmit"
update="form:msg form:regDetailPanel form:regData" ajax="true">
<f:attribute name="fname" value="#{registrationDetails.firstName}"/>
<f:attribute name="lname" value="#{registrationDetails.lastName}"/>
<f:attribute name="loc" value="#{registrationDetails.location}"/>
<f:attribute name="email" value="#{registrationDetails.email}"/>
<f:attribute name="contact" value="#{registrationDetails.contactNumber}"/>
<f:attribute name="address" value="#{registrationDetails.address}"/>
<p:ajax event="click" immediate="true" update="form:regDetailPanel form:regData"/>
</p:commandButton>
You have to clear the values in your backing bean so the value expressions like "#{registrationDetails.firstName}" return null or an empty string.
i.e. in Java code, set all values that have to be cleared to null after the registration is successful.
This has to be done somewhere in your actionListener "#{registrationDetails.formSubmit}".
As you are using AJAX, you have to make sure the parts of your JSF page with the text fields are updated after the successful ajax call.
You can use the p:commandButton thus:
<p:commandButton action="#{myBean.method()}" value="Send" update="myForm" />
When I used the attribute update="myForm" of p:commandButton.
The values of fields in the form will empty after submitting the form.
I copied the exact code from this Primefaces http://blog.primefaces.org/?p=1512 blog about easy password validation
<h:outputLabel for="pwd1" value="Password 1: *" />
<p:password id="pwd1" value="#{registerMB.password}"
feedback="false" match="pwd2" label="Password 1" required="true" />
<h:outputLabel for="pwd2" value="Password 2: *" />
<p:password id="pwd2" value="#{registerMB.password}"
feedback="false" label="Password 2" required="true" />
<f:facet name="footer">
<p:commandButton value="Register" action="/pages/public/login" />
<p:commandButton value="Cancel" immediate="true"
action="/pages/public/login" />
</f:facet>
Validation works but I am only able to get the Validation Error. The message Password 1 should match Password 2 is never displayed. Is there anymore configuration for this?
I have Primefaces 3.4.1 downloaded
Try to add the following
validatorMessage atribute inside p:password tag id="pwd2":
<p:password id="pwd2" value="#{registerMB.password}"
feedback="false" label="Password 2" required="true"
validatorMessage="password 1 should match password 2"/>
add p:message tag to show the error below the h:form tag
<p:messages id="messages" showDetail="true" autoUpdate="true"/>
add <p:messages id="messages" showDetail="true" autoUpdate="true"/>
just like int Primefaecs Password Showcase
<h:form id="form">
<p:panel header="Match Mode">
<p:messages id="messages" showDetail="true" autoUpdate="true"/>
<h:panelGrid columns="2" id="matchGrid">
<h:outputLabel for="pwd1" value="Password 1: *" />
<p:password id="pwd1" value="#{passwordBean.password5}" match="pwd2" label="Password 1" required="true"/>
<h:outputLabel for="pwd2" value="Password 2: *" />
<p:password id="pwd2" value="#{passwordBean.password5}" label="Password 2" required="true"/>
</h:panelGrid>
<p:commandButton id="saveButton" update="matchGrid" value="Save" />
</p:panel>
</h:form>
I need to show and hide component in my JSF 2-PrimeFaces application, please find my code below for the same:
<p:outputLabel for="online_offer" value="Online offer#{msg._question_mark}" styleClass="font-size-1em font-weight-bold input-panel-main" />
<p:panel>
<h:panelGrid columns="1">
<p:selectBooleanButton id="online_offer" value="#{QckPstBen.offer.isExpired}" onLabel="Yes" offLabel="No" onIcon="ui-icon-check" offIcon="ui-icon-close" >
<f:ajax event="click" render="#form" />
</p:selectBooleanButton>
</h:panelGrid>
</p:panel>
<h:outputLabel value=" " />
<h:panelGroup rendered="#{QckPstBen.offer.isExpired}">
<p:outputLabel for="website" value="Website/link to the offer#{msg._colon}" styleClass="font-size-1em font-weight-bold input-panel-main" />
<p:panel>
<h:panelGrid columns="1">
<p:inputText id="website" required="true" size="38" />
<p:watermark for="website" value="www.discountbox.in" />
</h:panelGrid>
</p:panel>
</h:panelGroup>
But it doesnt work, any clue
PrimeFaces components doesn't support <f:ajax>. Use <p:ajax> instead.
<p:selectBooleanButton ...>
<p:ajax update="#form" />
</p:selectBooleanButton>
Note that I omitted the event attribute, it defaults here to click already.
Place rendered on children of <h:panelGroup> instead or place a container of some sort around it, for example p:panel.
This may be OBE by now but...
When referencing the page bean, don't I recall in the #{} context, the convention of using lowercase for class names and method/attributes of the page bean (i.e. not #{QckPstBen.offer.isExpired} but #{qckPstBen.offer.isExpired}?
For what reason facesContext.validationFailed could be null? (in a postBack where there are errors..)
I had to resort to an ugly if (#{fn:containsIgnoreCase(facesContext.maximumSeverity,'ERROR')}) showSecurePopup('confirm'); because facesContext.validationFailed is coming back null..
the test code is:
<h:form>
<h:messages />
<br></br>
<h:outputText value="Validation failed: #{facesContext.validationFailed}" />
<br></br>
<h:outputLabel for="field1" value="Test Field" />
<br></br>
<h:inputText required="true" />
<h:commandButton action="#{contactBacking.submitComment}" value="Submit"
<f:ajax render="#form" execute="#form" />
</h:commandButton>
</h:form>
EDIT: Edited as per #BalusC's answer.. and took screenshot of result:
The FacesContext#isValidationFailed() returns a boolean which is never null. Just get rid of that nonsensicial nullcheck.
<h:outputText value="Validation failed: #{facesContext.validationFailed}" />
I have a form and two command buttons. I want that on pressing the enter key, the second commandButton is pressed, but the first commandButton is being pressed.
Please consider the following sample code.
<h:form>
<p:inputtext value="#{bean.mobileNumber}" />
<p:commandButton id="startNewChat" value="Chat" action="#{bean.startNewChat}" update="chatWindow" />
<br />
<br />
<p:outputPanel id="chatWindow">
<p:inputTextarea readonly="true" value="#{bean.chatMessages}" />
<p:inputText value="#{bean.newChatMessageFromWeb}" />
<p:commandButton id="submitChatMessage" action="#{bean.submitChatMessage}" value="Send Message" />
</p:outputPanel>
</h:form>
When Enter key is pressed, first commandButton(with id="startNewChat") is pressed, but I want that second commandButton(with id="submitChatMessage") should be pressed.
What I have tried: accesskey="13", type="submit", id="submit"
I assume that you want to apply this on the second input field, in that case you need to capture the keypress event and invoke the button by JS when the key code is 13.
<form id="form">
...
<p:inputText value="#{bean.newChatMessageFromWeb}" onkeypress="if (event.keyCode == 13) { document.getElementById('form:submitChatMessage').click(); return false; }" />
<p:commandButton id="submitChatMessage" action="#{bean.submitChatMessage}" value="Send Message" />
(note that I added an id to the <h:form> so that the command button gets a fixed ID which is selectable by JS, also note the return false, this will block the default button from getting fired)
A more clean way would be to put each form in its own <h:form>.
<h:form>
<p:inputtext value="#{bean.mobileNumber}" />
<p:commandButton id="startNewChat" value="Chat" action="#{bean.startNewChat}" update=":chatWindow" />
</h:form>
<p:outputPanel id="chatWindow">
<h:form>
<p:inputTextarea readonly="true" value="#{bean.chatMessages}" />
<p:inputText value="#{bean.newChatMessageFromWeb}" />
<p:commandButton id="submitChatMessage" action="#{bean.submitChatMessage}" value="Send Message" />
</h:form>
</p:outputPanel>
It's like that in html. The submit button that comes first in markup is the one activated with enter. Try setting
type="button"
on the first command button, if that doesn't work, you don't have much choice except maybe reordering your buttons and styling them so that one appears before another, or as BalusC said capturing keypresses with js.
If your inputText and submit buttons are inside the same form, put this inside the form
<p:defaultCommand target="yourButtonId" />
the enter key will trigger the button with the target id.
In case of the op's question, just putting that line at the end of the form with the desired button's id as the target would solve the problem.
<h:form>
<p:inputtext value="#{bean.mobileNumber}" />
<p:commandButton id="startNewChat" value="Chat" action="#{bean.startNewChat}" update="chatWindow" />
<br />
<br />
<p:outputPanel id="chatWindow">
<p:inputTextarea readonly="true" value="#{bean.chatMessages}" />
<p:inputText value="#{bean.newChatMessageFromWeb}" />
<p:commandButton id="submitChatMessage" action="#{bean.submitChatMessage}" value="Send Message" />
</p:outputPanel>
<p:defaultCommand target="submitChatMessage" />
</h:form>