This examples shows how you can implement complex validation on the clide side like conditional validation or "connected" validation over mulitple inputs.
If you select "Name required", you have to set content in the "Name" input.
<script>
//<![CDATA[
PrimeFaces.validator['MyComplexValidator'] = {
validate: function (element) {
let nameRequiredPf = PF('nameRequired');
let namePf = PF('name');
if (nameRequiredPf.isChecked() && namePf.getValue().length === 0) {
PrimeFaces.validation.ValidationContext.highlight(namePf);
PrimeFaces.validation.ValidationContext.addMessage(namePf, {
summary: 'Validation Error',
detail: 'A name is required!'
});
} else {
PrimeFaces.validation.ValidationContext.unhighlight(namePf);
}
}
};
//]]>
</script>
<div class="card">
<h:form id="form">
<p:outputPanel pt:data-p-val="MyComplexValidator">
<p:messages showDetail="true">
<p:autoUpdate/>
</p:messages>
<h:panelGrid id="grid" columns="3" cellpadding="5">
<p:outputLabel for="@next" value="Name required"/>
<p:selectBooleanCheckbox id="nameRequired" widgetVar="nameRequired"
value="#{complexValidationView.nameRequired}"/>
<p:message for="@previous"/>
<p:outputLabel for="@next" value="Name"/>
<p:inputText id="name" widgetVar="name" value="#{complexValidationView.name}" label="Name"/>
<p:message for="@previous"/>
<p:outputLabel for="@next" value="Accept Terms And Conditions"/>
<p:selectBooleanCheckbox id="terms" value="#{complexValidationView.acceptTermnsAndCondition}"/>
<p:message for="@previous"/>
</h:panelGrid>
<p:defaultCommand target="btnAjax"/>
<p:commandButton value="Non-Ajax" ajax="false" icon="pi pi-check" validateClient="true"
action="#{complexValidationView.doNonAjax()}" style="margin-right:10px"/>
<p:commandButton value="Ajax" id="btnAjax" update="@form" icon="pi pi-check" validateClient="true"
action="#{complexValidationView.doAjax()}" style="margin-right:10px"/>
<p:commandButton value="Disabled (without CSV)" ajax="false" icon="pi pi-check"
action="#{complexValidationView.doNonAjaxWithoutCsv()}" style="margin-right:10px"/>
</p:outputPanel>
</h:form>
</div>
package org.primefaces.showcase.view.csv;
import jakarta.enterprise.context.RequestScoped;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.inject.Named;
import io.quarkus.runtime.annotations.RegisterForReflection;
@Named
@RequestScoped
@RegisterForReflection(serialization = true)
public class ComplexValidationView {
private String name;
private boolean nameRequired;
private boolean acceptTermnsAndCondition;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public boolean isNameRequired() {
return nameRequired;
}
public void setNameRequired(boolean checked) {
this.nameRequired = checked;
}
public boolean isAcceptTermnsAndCondition() {
return acceptTermnsAndCondition;
}
public void setAcceptTermnsAndCondition(boolean acceptTermnsAndCondition) {
this.acceptTermnsAndCondition = acceptTermnsAndCondition;
}
public void doAjax() {
FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Ajax-action", "Hello from the server side!");
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void doNonAjax() {
FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Non-Ajax-action", "Hello from the server side!");
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void doNonAjaxWithoutCsv() {
FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Non-Ajax-action", "Hello from the server side, we skipped the CSV!");
FacesContext.getCurrentInstance().addMessage(null, msg);
}
}