AJAX onSubmit validation in JSF 2.0

Question

I've started learning JSF2.0, and have come across a problem. Any advice on how to proceed would be welcome.

I have renamed form elements and classes for simplicity sake.

I have a form, for example:

<h:form id="frmSearch">
    <h:inputText id="dataPoint1" value="#{bean.dataPoint1}"/>
    <div id="dataPoint1Error" class="msgError">Value not found in database.</div>

    <h:inputText id="dataPoint2" value="#{bean.dataPoint2}"/>
    <div id="dataPoint2Error" class="msgError">Value not found in database.</div>

    <h:commandButton action="#{bean.validate}" type="submit" value="Search"/>
</h:form>

The CSS class "msgError" keeps the element hidden by default.

I would like to basically have a method in the "bean" class that validates the input by checking against the database, then if the value isn't found, unhide the error message, or if it is found, then execute another method which performs the actual functionality.

In my head, it would work sort of like this in the Java (forgive any syntax errors, just typing as I think):

@ManagedBean
public class Bean {
    private String dataPoint1 = "";
    private String dataPoint2 = "";

    public boolean validate() {
        if(dao.fieldExists(this.dataPoint1) && dao.fieldExists(this.dataPoint2)) { //check the database
            performFunctionality();
            return true;
        }
        else {
            return false; //and show error div on screen
        }
    }        

    public void performFunctionality() {
        //do whatever
    }

    //getters and setters
}

Any advice would be very welcome! Thanks!

score 7 · Accepted Answer · edited Jun 20 '20 at 09:12

You're not utilizing JSF builtin validation facilities. Make use of it.

Here's how it can look like:

<h:form id="frmSearch">
    <h:inputText id="dataPoint1" value="#{bean.dataPoint1}" validator="#{bean.validateDataPoint}" />
    <h:message for="dataPoint1" />

    <h:inputText id="dataPoint2" value="#{bean.dataPoint2}" validator="#{bean.validateDataPoint}" />
    <h:message for="dataPoint2" />

    <h:commandButton action="#{bean.performFunctionality}" value="Search">
        <f:ajax execute="@form" render="@form" />
    </h:commandButton>
</h:form>

with

public void validateDataPoint(FacesContext context, UIComponent component, Object convertedValue) {
    if (!dao.fieldExists((String) convertedValue)) {
        throw new ValidatorException(new FacesMessage("Value not found in database."));
    }
}

That performFunctionality() must be executed by the command button's action method.

When validation fails (i.e. ValidatorException is been thrown), then the message will be displayed in the <h:message> associated with the input component and the action method won't be invoked. The validator attribute can alternatively also point to a fullworthy class which implements javax.faces.validator.Validator. The <f:ajax> is been added to make it an ajax submit.

AJAX onSubmit validation in JSF 2.0

1 Answers1

See also: