At least one/group of multiple fields required in JSF - validation

I'm trying to do a search function of which I have multiple fields and need at least one of them required, or a group of them.
The only answer I found on StackOverflow is this one: How to validate if at least one of multiple input fields is entered?
And there are 2 solutions there: One uses Omnifaces (which I can't use due to project requirements), and the other is not elegant, because it grows a lot when the number of fields is big.
I have these fields for example:
<p:selectOneMenu value="#{backingBean.type}"id="type">
<f:selectItem itemLabel="#{constantsController.SELECT_TYPE_HEADER}"
itemDisabled="true" />
<f:selectItems
value="#{constantsController.getTypes().entrySet()}"
var="entry" itemValue="#{entry.key}" itemLabel="#{entry.value}" />
</p:selectOneMenu>
<p:inputText id="number" value="#{backingBean.number}"/>
<p:inputText id="year" value="#{backingBean.year}"/>
<p:inputText id="number2" value="#{backingBean.number2 }"/>
<p:selectOneMenu value="#{backingBean.state}"
id="state" filter="true" filterMatchMode="startsWith">
<f:selectItem itemLabel="Choose its state" disabled="true" />
<f:selectItems value="#{constantsController.getStates().entrySet()}"
var="entry" itemValue="#{entry.key}" itemLabel="#{entry.value}" />
</p:selectOneMenu>
<p:selectOneMenu id="entity"
value="#{backingBean.entity }">
<f:selectItem itemLabel="Select entity"
itemDisabled="true" />
<f:selectItem itemLabel="Entity1" itemValue="1"></f:selectItem>
<f:selectItem itemLabel="Entity2" itemValue="2"></f:selectItem>
</p:selectOneMenu>
<p:selectOneMenu id="documentType"
value="#{backingBean.documentType}">
<f:selectItems
value="#{constantsController.getDocumentTypes().entrySet()}"
var="entry" itemValue="#{entry.key}" itemLabel="#{entry.value}" />
</p:selectOneMenu>
<p:inputText id="documentNumber" value="#{backingBean.documentNumber}"/>
So as you can see, I have multiple fields. And the requirements dictate that I need one of the following required (I'll write the id's):
1- type + number + year
2- number2 + state
3- entity
4- documentType + documentNumber
So I when I click the commandButton, I need this to check if one of these groups (1, 2, 3 or 4) is filled.
Also, the groups in itself need to be required, i.e. let's say I already filled 'entity', and I also filled the 'year', it cannot let me advance since year needs to be accompanied by 'type' and 'number'.

I solved it by associating a boolean in the backing bean to each of the fields/group of fields. It's not an elegant solution, but I wasn't finding any other solution.
So what I did was define by group of fields in the backing bean a boolean initialized with true value:
private boolean typeNumberYear = true;
private boolean number2State = true;
private boolean entityRequired = true;
private boolean documentTypeDocumentName = true;
private boolean masterRequired = true;
then to validate them:
public void checkRequiredFields(){
if(!type.equals("") && number != 0 && year != 0)
typeNumberYear = false;
if(number2 != 0 && !state.equals(""))
number2State = false;
if(!entity.equals(""))
entityRequired= false;
if(!documentType.equals("") && documentNumber != 0)
documentTypeDocumentName = false;
if(!typeNumberYear || !number2State || !entityRequired || !documentTypeName)
masterRequired = false;
}
Since all this is in the backing bean, I can just put this function on the actionListener of the command button, while the action function is still in the controller.
<p:commandButton value="Search" icon="ui-icon-search"
actionListener="#{backingBean.checkRequiredFields}"
action="#{controller.searchButtonClicked}"/>
Now in the required parameter I just associated the respective boolean and the masterRequired on all of them. E.g. in the type, number and year inputs, I put the required as follows:
required = "backingBean.typeNumberYear and backingBean.masterRequired"
The only downside to this solution, is that in the interface, there will be appearing an asterisk on all the fields that are indicated above, but if you just input the entity for example, it will search as it is supposed to, and then it will update and remove the asterisks.

Related

How to Trigger Ajax To Load Nested Dropdowns After Loading A Form?

I have a button to display an edit dialog form with a selectOneMenu that holds prefix number values in it and, after selecting one of those prefix values, three selectCheckboxMenu are loaded with employees data. This is workinkg fine.
<p:outputLabel value="prefix" for="prefixo" />
<h:panelGroup>
<p:selectOneMenu id="prefixo" value="#{demandasController.selected.prefixo}" converter="prefixosConverter" filter="true" filterMatchMode="contains">
<f:selectItem itemLabel="#{adeBundle.SelectOneMessage}" itemValue="#{null}" />
<f:selectItems value="#{prefixosController.items}"
var="prefixoItem"
itemValue="#{prefixoItem}"
itemLabel="#{prefixoItem.prefixo} - #{prefixoItem.nomePrefixo}"
/>
<p:ajax event="valueChange" update="uorPosCollection uorPosCollection1 uorPosCollection2" listener="#{demandasController.changePrefixo}"/>
</p:selectOneMenu>
</h:panelGroup>
<p:outputLabel value="Executivo(s)" for="uorPosCollection" />
<p:selectCheckboxMenu id="uorPosCollection" value="#{demandasController.selected.uorPosCollection}" label="Executivo(s)" multiple="true" converter="uorPosConverter" filter="true" filterMatchMode="contains" >
<f:selectItems value="#{demandasController.availableExecutivos}"
var="uorPosCollectionItem"
itemValue="#{uorPosCollectionItem}"
itemLabel="#{uorPosCollectionItem.matricula} - #{uorPosCollectionItem.nome} (#{uorPosCollectionItem.prefixo.prefixo})" />
</p:selectCheckboxMenu>
<!-- analogous code ommited -->
The Listener:
public void changePrefixo(AjaxBehaviorEvent event) {
availableExecutivos = LoadExecutivosListCombo(super.getSelected().getPrefixo());
//analogous methods ommited
}
The methods to load the employees lists:
private List<UorPos> LoadExecutivosListCombo(Prefixos prefixos) {
List<SelectItem> listExecutivosCombo = new ArrayList<>();
List<UorPos> listExecutivos = uorPosFacade.findUorPosExecutivosByPrefixo(prefixos);
for (int i = 0; i < listExecutivos.size(); i++) {
listExecutivosCombo.add(new SelectItem(listExecutivos.get(i)));
}
return listExecutivos;
}
//analagous methods ommited
Native queries to retrieve database:
public List<UorPos> findUorPosExecutivosByPrefixo(Prefixos prefixo) {
return (List<UorPos>) getEntityManager().createNativeQuery("SELECT * FROM UorPos WHERE prefixo=9951", UorPos.class).setParameter(1, prefixo.getPrefixo()).getResultList();
}
//analagous methods ommited
But when editing a register that already has prefix and employee values (saved earlier by some user), the 3 selectCheckboxMenu are loaded showing (undesired) id's entity class name on its labels value and empty dropdowns:
e.g.: in the figure above, when the edit form was loaded, it shows the values saved earlier by some user: the prefix 9882 (displayed as expected) and the three (empty) dropdowns for employees (displayed with the undesired class names in it). If I select a different value than 9882, the dropdowns are (ajax) filled as expected and if I select 9882 again, the employees are displayed as expected (without the class names):
I'm trying to resolve it by activating the ajax as below, but don't know how to call it in the function:
<p:dialog onShow="CallAjaxFunction()" modal="true" >
<script>
function CallAjaxFunction() {
<!-- how to call the ajax here ? -->
alert("displaying after form was loaded.")
}
</script>
...
</p:dialog>
Does anyone knows how to trigger ajax to load nested dropdowns after loading a form?
Or if someone has any other solution to display the values in the labels (without the class name) and automattically load the nested dropdowns, I appreciate that.
Thanks in advance.
After researching, I've used the listener to update the combos, using for this the open ajax event in the dialog:
<p:dialog onShow="PF('prefixowv').selectValue(':selected').click();" update= DemandasEditForm:uorPosCollection DemandasEditForm:uorPosCollection1 DemandasEditForm:uorPosCollection2 />
And changed the ajax event to selectItem, instead of valueChange:
<p:selectOneMenu id="prefixo" value="#{demandasController.selected.prefixo}" converter="prefixosConverter" filter="true" filterMatchMode="contains">
<f:selectItem itemLabel="#{adeBundle.SelectOneMessage}" itemValue="#{null}" />
<f:selectItems value="#{prefixosController.items}"
var="prefixoItem"
itemValue="#{prefixoItem}"
itemLabel="#{prefixoItem.prefixo} - #{prefixoItem.nomePrefixo}"
/>
<p:ajax event="selectItem" update="uorPosCollection uorPosCollection1 uorPosCollection2" listener="#{demandasController.changePrefixo}"/>
</p:selectOneMenu>
Regards,

primefaces selectonemenu change event not working for null value

I have a selectonemenu that includes some items. And a null item for showing "please choose one"..
MY goal is to query some data when I select one of them. And if i select the "please choose one" do another thing.
But eventually, the change event is fired for normal values but if I select "please choose one" item , it is not fired. Thanks for your help. Here is my code.
<p:selectOneMenu style="width: 200px" id="positionForward" value="#{hrProcessController.queryCriteria.positionForward}" converter="listConverter"
effect="fade" var="u" filter="true" filterMatchMode="startsWith" validator="#{hrProcessController.isOpenPositionForwValid}">
<f:selectItem itemLabel="#{menu['onemenu.choose']}" itemValue="#{null}"/>
<f:selectItems value="#{hrProcessController.positionList}" var="position" itemLabel="#{position.name}" itemValue="#{position}" />
<p:ajax event="change" listener="#{hrProcessController.onPositionSelect}" update="openPositionForward"/>
<p:column>
<h:outputText value="#{u==null ? menu['onemenu.choose'] : u.name}" />
</p:column>
</p:selectOneMenu>
public void onPositionSelect()
{
if(queryCriteria.getPositionForward()!=null)
{
OpenPositionQueryCriteria criteria = new OpenPositionQueryCriteria();
criteria.setPosition(queryCriteria.getPositionForward());
List<OpenPosition> openPositions = openPositionService.searchOpenPosition(criteria);
setOpenPositionList(openPositions);
}
else
{
List<OpenPosition> positions = openPositionService.getActiveOpenPositionList();
setOpenPositionList(positions);
}
}
If you use itemValue="#{null}" or itemValue="", the valueChangeListener method never will be called.
That's a better approach if you want your first item null:
<f:selectItem
itemDisabled="true"
itemLabel="#{null}"
itemValue="#{null}" />
I had the same problem.
Change event WON'T be fired by selecting default value. Why that is so is beyond me. Such things are normal usually.
I didn't find any real solution.
You should try to write custom validator and converter for this.
Try this:
Using a "Please select" f:selectItem with null/empty value inside a p:selectOneMenu
OK, I finally found the solution to this!
you need to add immediate="true" to ajax call.
Adding immediate tells ajax to ignore any potential validation errors and call the onChange anyway.
Try it.
I was with the same issue so I put the selectItem without the propertie itemValue like that:
<f:selectItem itemLabel="#{menu['onemenu.choose']}" />

How to validate p:pickList to require at least one selection

I have used column picklist to customize columns of table on page and I want to show dialog message (Atleast one column should be enabled) if user disables all the columns from picklist. That means user should keep atleast one column in enable box.
<p:dialog id="pickListDialog" header="Customize View"
widgetVar="dlg">
<h:panelGrid>
<p:pickList id="columnPickList"
value="#{Class_Name.columns}" var="col"
itemLabel="#{Class_Name.columnPickList.columnsDisplayMap.get(col)}"
itemValue="#{col}">
<f:facet name="sourceCaption">Disabled</f:facet>
<f:facet name="targetCaption">Enabled</f:facet>
</p:pickList>
<p:commandButton value="Submit"
actionListener="#{Class_Name.columnPickList.saveColumns}" onclick="return disableClick();"
ajax="false" />
</h:panelGrid>
</p:dialog>
Javascript method -
function disableClick(){
if (document.getElementById("form:columnPickList_target").value == ""){
alert("Please Select Atleast One Field");
return false;
}
}
Here I have used Javascript for this. But I want to do this by JSF .
can anyone please tell me ?
Case 1 : Using required attribute
<p:pickList id="columnPickList" required="true" requiredMessage="Atleast one column should be enabled"
value="#{Class_Name.columns}" var="col"
itemLabel="#{Class_Name.columnPickList.columnsDisplayMap.get(col)}"
itemValue="#{col}">
<f:facet name="sourceCaption">Disabled</f:facet>
<f:facet name="targetCaption">Enabled</f:facet>
</p:pickList>
Case 2 : Opening dialog from backing bean
public void saveColumns()
{
validateColumns();
//doSomthing
}
public void validateColumns() {
//check if picklist target is empty
if(columns.getTarget().size()==0)
{
//open dialog
message="Atleast one column should be enabled";
RequestContext.getCurrentInstance().execute("validationDialog.show()");
}
}
private String message; //getter and setter
dialog :
<p:dialog id="valid" widgetVar="validationDialog">
<p:outputLabel value="#{yourbean.message}" />
</dialog>

ajax call makes field empty

updated the code but not real change.
When I set the player I want to update the other select one menu with the current players club. But the menu will become completely empty. The bean will always return the correct value.
Navigating from the page and back will show the correct value. It will then always work as intended after the first time you navigate back.
<p:selectOneMenu value="#{player}"
converter="playerConverter" id="playerList">
<f:selectItem itemLabel="---" noSelectionOption="true" />
<f:selectItems value="#{servicePlayer.allPlayers}"
var="n"
itemValue="#{n}"
itemLabel="#{n.combinedName}"
itemLabelEscaped="true"/>
<p:ajax event="change" execute="#this" update="ClubMenu" actionListener="#{serviceHCP.getClubs(player)}"/>
<!-- p:ajax event="change" execute="#this" render="ClubMenu" /-->
</p:selectOneMenu>
<h:outputText value="Klubb"></h:outputText>
<p:selectOneMenu id="ClubMenu" value="#{serviceHCP.myClubList}" rendered="#{not empty serviceHCP.myClubList}">
<f:selectItems value="#{serviceHCP.getClubs(player)}" />
</p:selectOneMenu>
<h:outputText value="Serietyp"></h:outputText>
Backing bean function
public void getClubs(Player player) {
if (factory == null) {
factory = Persistence.createEntityManagerFactory(PERSISTENCE_UNIT_NAME);
}
EntityManager em = factory.createEntityManager();
//If we have a player just return that players club
Query q;
if (player == null || player.getClub() == null)
q = em.createQuery("select t from Club t");
else {
q = em.createQuery("select t from Club t where t.id = :playerID");
q.setParameter("playerID", player.getClub().getId());
}
myClubList = q.getResultList();
for (Club aClub : myClubList) {
System.out.println("Club list info: " + aClub);
}
System.out.println("Club Size: " + myClubList.size());
em.close();
}
You need to also process the playerList field:
<p:ajax process="#this" update="ClubMenu" />

JSF selectOneMenu validation and ajax rendering

I have a validation on my selectOneMenu to prevent the user to select "None" item in the list.
<h:selectOneMenu id="selectMenu" value="#{bean.selectedValue}" required="true" requiredMessage="Please select an item">
<f:ajax render="toRender selectMenuMessage" listener="#{bean.onSelect}"/>
<f:selectItem itemLabel="None" noSelectionOption="true"/>
<f:selectItems value="#{bean.items}" var="item" itemValue="#{item.id}" itemLabel="#{item.label}"/>
</h:selectOneMenu>
I have my panel below and a want to show it only when my item is not "None".
So when I select "None", the message should render and the panel disappear.
<h:panelGroup id="toRender">
<h:panelGrid rendered="#{bean.selectedValue == 0 ? false : true">
...
</h:panelGrid>
</h:panelGroup>
It's working without the validation but I can't make both work.. It's like if validation prevents rendering.
Any suggestion?
Thanks
I guess that bean.selectedValue is an Integer, so try this:
<f:selectItem itemValue="0" itemLabel="None" noSelectionOption="true"/>
Edit:
Ah sorry, I think misunderstood your problem a little bit.
The problem here is, that if you are requiering a value for the selectOneMenu the value will not submitted if it is empty. And if the item with noSelectionOption="true" is selected, it will be handled as empty, so no value will be submitted. When you are checking against bean.selectedValue == 0, selectedValue will never - except maybe initially - be 0, because when you select the item with value 0 it will not be submitted, as described above.
So you are right, your validation and the check for bean.selectedValue == 0 can not work together. I would recommend you to just remove the validation.
If this is no option for you, please explain me why you need it to work that way in more details.
I have a response, it's not the solution but it's another way to do this...
<h:selectOneMenu id="selectMenu" value="#{bean.selectedValue}">
<f:ajax render="toRender selectMenuMessage" listener="#{bean.onSelect}"/>
<f:selectItem itemLabel="None" noSelectionOption="true"/>
<f:selectItems value="#{bean.items}" var="item" itemValue="#{item.id}" itemLabel="#{item.label}"/>
</h:selectOneMenu>
And in the bean
public void onSelect() {
if(this.selectedValue != 0) {
// Do smthg here
} else {
// Display error message
UIComponent component = Outils.getFacesContext().getViewRoot().findComponent(":form:selectMenu");
if(component != null) {
Outils.getFacesContext().addMessage(component.getClientId(), new FacesMessage(FacesMessage.SEVERITY_ERROR, "", "Test msg"));
}
}
}
This way the validation process is not launched and the verification is done in the bean.
If someone find something better, let me know!

Resources