I am working on JSF2.0 and Richfaces. I am having an requirement where I need to change the style of the form field(entire row) if the validation fails. I am using the following code to display field label and text box.
<h:panelGrid columns="2">
<h:outputLabel value="#{uit.firstname}:">
<span class="required"><strong>*</strong> </span>
</h:outputLabel>
<h:inputText value="#{editUserProfileBean.firstName}" type="text"
id="firstname" styleClass="basicFormTextBox" size="30"
required="true" requiredMessage="#{uitkem.valueRequired}"
validatorMessage="#{prod.firstNameValidator}">
<f:validateLength maximum="#{prodConf.MaxLengthForFirstName}"
minimum="#{prodConf.MinLengthForFirstName}" />
<f:validator validatorId="trimSpaces" />
</h:inputText>
</h:panelGrid>
Suppose if the validation fails, I need to hightlight the row(both label and textbox).
I can use the following code to hightlight the textbox if the validation fails. But I want to hightlight the entire row, that is not possible using the following code.
<h:inputText value="#{editUserProfileBean.firstName}" required="true" styleClass="#{not component.valid ? 'newStyleClass' : ''}" />
Can anyone help me on this?
Thanks in advance.
You could just write a tiny JS script with jQuery, or use <rich:jQuery> for that.
Related
I know this question exists somewhere else in SO but either the solutions are old (and JSF seems to have improved a lot) or I cannot make the solution work.
As simple as it sounds, I would like to replace the text of an input element based on the value of a combo box. I would like to use Ajax, and would like this to work even if there is only one element in the combo (it doesn't matter if by default the selection of the combo is empty).
<h:selectOneMenu id="fnamecombo" valueChangeListener="#{namesController.setForename(fnamecombo)}">
<c:forEach items="#{namesController.myForenames}" var="myforename">
<f:selectItem itemValue="#{myforename}" itemLabel="#{myforename}" />
</c:forEach>
<f:ajax render="fnameinput" />
</h:selectOneMenu>
<h:inputText value="#{namesController.forename}" id="fnameinput" />
This doesn't work. So first of all, I have no idea how to call the setForename method. If I use valueChangeListener="#{namesController.setForename('xxxxx')}" it works, but only the 1st time and iff there are more than one element in the combo, since otherwise the event does not seem to be fired.
What is the easy fix?
EDIT
Ok, so I have made progress. It was easier than I expected:
<h:selectOneMenu id="fnamecombo" value="#{namesController.forename}">
<c:forEach items="#{namesController.myForenames}" var="myforename">
<f:selectItem itemValue="#{myforename}" itemLabel="#{myforename}" />
</c:forEach>
<f:ajax render="fnameinput" />
</h:selectOneMenu>
<h:inputText value="#{namesController.forename}" id="fnameinput" />
This seems to work on a selectItem that I create by hand, but not on the one that is printing with the foreach loop. So this is the rendered code, where I obtained 'john' from the loop and I manually created 'example':
<select id="myForm:fnamecombo" name="myForm:fnamecombo" size="1" onchange="mojarra.ab(this,event,'valueChange',0,'myForm:fnameinput')">
<option value="example">example</option>
<option value="john">john</option>
</select>
It works with 'example' but not with 'john'.
Finally I got the answer.
<h:selectOneMenu id="fnamecombo" value="#{namesController.forename}">
<f:selectItems value="#{namesController.myForenames}" />
<f:ajax render="fnameinput" />
</h:selectOneMenu>
<h:inputText value="#{namesController.forename}" id="fnameinput" />
No need for forEach as mentioned by Alexandre Lavoie.
This answer by Luiggi Mendoza gave me the hint to find it out. The reason my input was not updated by the values in the f:selectItems and it was in the ones that I introduced manually is the scope of the managed bean. I realised that the input was actually being updated in any case, but when coming from the f:selectItems the input was updated with null. Why? Because the scope of namesController was #RequestScoped and not #ViewScoped. Changing this solves the problem.
I have a h:form with several inputs and each of them got its own h:message and I'm looking for a way to show (using render or assigning some styleClass) some other element only when specific h:message is being shown (and hide when that h:message is not being displayed).
Here a code snippet
<li>
<h:panelGroup id="current_password_wrapper">
<p:password value="#{myBean.myCurrPass}" id="current_password" required="true"
styleClass="required_field" />
</h:panelGroup>
<h:message for="current_password"/>
</li>
<li>
<h:panelGroup id="new_password_wrapper">
<p:password value="#{myBean.myNewPass}" id="new_password" required="true"/>
</h:panelGroup>
<h:message for="new_password"/>
<h:commandLink value="my value"/>
</li>
I want to make the h:commandLink visible only when the <h:message for="new_password"/> is being displayed
So far I couldn't find anything...
If your environment supports EL 2.2, then you could check if FacesContext#getMessageList() isn't empty for the particular client ID.
<p:password binding="#{new_password}" ... />
<h:commandLink ... rendered="#{not empty facesContext.getMessageList(new_password.clientId)}" />
If the message is being shown as result of a validation error, then you could also just check the UIInput#isValid() state of the component associated with the message.
<p:password binding="#{new_password}" ... />
<h:commandLink ... rendered="#{not new_password.valid}" />
Note that manually adding a faces message to the context won't mark the input component invalid. Therefor either a true Validator should be used which throws a ValidatorException, or an explicit input.setValid(false) call has to be done programmatically.
I think with the answer to this question you requirement can be archived:
How to number JSF error messages and attach number to invalid component
I think you can do something like this:
<h:outputText value="output text" rendered="#{bean.messageIndexes['form:input1'] > 0}" />
<a4j:outputPanel id="tapalSectionSendToPanel" ajaxsingle="true">
<h:inputText id="sendToId1" value="#{MainBean.SectionBean.sendTo}"
class="createresizedTextbox"
required="true" requiredMessage="#{msg.labl_required}"
disabled="true" />
<h:message for="sendToId1" style="color:red" />
</a4j:outputPanel>
i need to validate textbox for empty validation and should show required when i click button without entering any value in textbox. It works fine without disabled="true". Whats the alternative for my requirement.
First, required and disabled don't go well together, because they are mutually exclusive as per the JSF Spec:
required: Flag indicating that the user is required to provide a submitted value for this input component.
disabled: Flag indicating that this element must never receive focus or be included in a subsequent submit.
Like I said in the comments, you can just display a message when the user tries to submit the form without selecting a node:
<h:inputText id="sendToId1" value="#{MainBean.SectionBean.sendTo}"
styleClass="createresizedTextbox" required="true" readonly="true" />
<h:message for="sendToId1" value="#{msg.labl_required}"
rendered="#{facesContext.postback and facesContext.validationFailed}" />
As an alternative you can just display a text anywhere in your markup:
<h:outputText value="#{msg.labl_required}"
rendered="#{empty MainBean.SectionBean.sendTo}" />
disabled="true" disables the input (so it's skipped when the form is submitted), if you don't want the user to type in it use readonly="readonly"
Here a snippet of my JSF:
<p:tabView id="tabView" var="tab" value="#{data.tabs}" widgetVar="tabViewWidget"
activeIndex="#{data.newActiveTabIndex}">
<p:ajax event="tabClose" listener="#{logic.closeTab}" />
<p:tab title="#{tab.content.title != null ? tab.content.title : '<new>'}"
closable="#{tab.isClosable and data.tabs.size() > 2}">
<h:outputText value="#{tab.id} Test" />
<p:focus rendered="#{data.componentIdToFocus != null}" for="#{data.componentIdToFocus}" />
<p:inputText id="test" value="#{tab.content.title}">
<p:ajax event="keyup" listener="#{logic.setFocusingComponent}" update=":form:tabView" />
</p:inputText>
</p:tab>
</p:tabView>
The intent is that there is a textfield within each tab that updates the title of the tab while writing.
The given snippet works except that p:focus places the cursor at the beginning of the text that is already written. I want the cursor to be placed at the end of the text already written. So that a user can type and while he/she is typing the title adapts automatically.
I hope my case is clear.
Does anybody have a solution for that?
Best regards,
Florian
You can use the onfocus="this.value=this.value" trick to "deselect" the value so that the cursor automagically ends up in the end of the value. This should work as good for the <p:inputText> as it basically generates just a <input type="text"> element.
<p:inputText ... onfocus="this.value=this.value" />
See also:
Use JavaScript to place cursor at end of text in text input element
Unrelated to the concrete problem, I wouldn't use ajax and such on keyup event and an update of the whole tabview. This seems to be quite expensive. I'd rather do a simple HTML DOM traversion and manipulation here by JS/jQuery.
E.g.
<p:inputText ... onkeyup="updateTitle(this)" />
with
function updateTitle(inputInTab) {
var panelId = $(inputInTab).closest(".ui-tabs-panel").attr("id");
$("a[href='#" + panelId + "']").text(inputInTab.value);
}
I am developing one JSF page, in that i am having two forms. And I am using rich:messages in both the forms.
Suppose, in the first form, if I don't enter any required fields and I click Save, then error messages are displaying twice in the page(as i am using rich:messages in two forms).
Is there any way so that error messages display with respect to the form?
Thanks in advance.
If you are using RichFaces 3.3.3.Final you can do it like so:
<a4j:form id="tmpfrm1">
<rich:messages />
<h:inputText value="#{mybean.intmp1}" required="true"/>
<a4j:commandButton value="save" action="#{mybean.test1}" reRender="tmpfrm1" limitToList="true" />
</a4j:form>
<a4j:form id="tmpfrm2">
<rich:messages />
<h:inputText value="#{mybean.intmp2}" required="true"/>
<a4j:commandButton value="save" action="#{mybean.test2}" reRender="tmpfrm2" limitToList="true" />
</a4j:form>
If you are uisng RichFaces 4 you need to replace the limitToList with limitRender and the reRender with render