Skip validation of Primefaces Inputtext on keyup event but validate on submit

Question

I have two requirements for my InputText:

1. value of the p:inputText should be immediately displayed on screen in h:outputText with keyup-event
2. the value should be unique in database

I'm using Primefaces 4.0, JSF 2.2 with Glassfish 4 and Java 7

My code looks like this at the moment

Example.xhtml

<h:form>
    <p:inputText id="value" value="#{myBean.value}" >
        <p:ajax event="keyup" update="example" process="@this" />
        <f:validator binding="#{uniqueValueValidator}" />
    </p:inputText>
    <h:outputText id="example" value="#{myBean.value}">
    <p:commandButton value="Save" action="#{myBean.saveValue}"/>
</form>

MyBean.java

@Named
@RequestScoped
public class MyBean {

    @Inject
    private DBService service;

    private String value;
    //getter, setter

    public String saveValue() {
        service.saveValue(value);
        return "showall";
    }
}

UniqueValueValidator.java

@Named
public class UniqueValueValidator implements Validator {

    @Inject 
    private DBService service;

    @Override
    public void validate(FacesContext context, UIComponent component, Object value)
        throws ValidatorException {

        if(service.isValueNotUnique(value.toString()) {
              // throw ValidatorException 
        }
    }
}

My problem is now, that on every keyup-event the value is validated and a call to the database is made. But I want to validate the value only when the form is submitted.

My first solution was to move the validation into the saveValue method.

public String saveValue() {
    if(service.isValueNotUnique(value) {
        // add a FacesMessage
        return null;
    } else {
         service.saveValue(value);
         return "showall";
    }
}

But here I think it is not good practice to mix validation code and logic code in one method.

So I hope you have a nicer solution for me ;)

Answer 1

The issue lies in the ajax tag inside the inputText component:

<p:ajax event="keyup" update="example" process="@this" />

This means that you are submitting the component on each keyup event. And the validator will be called each time consequently.

A possible workaround is to move the validator to another component, following the same technique used for validating multiple components:

In the facelets page add an inputHidden that uses uniqueValueValidator :

<h:form id="formId" >
    <p:inputText id="value" value="#{myBean.value}" >
        <p:ajax event="keyup" update="example" process="@this" />
    </p:inputText>
    <h:inputHidden id="hidden">
        <f:validator validatorId="uniqueValueValidator" />
    </h:inputHidden>
    <p:message for="hidden" />
    <p:commandButton value="Save" action="#{myBean.saveValue}" process="@form" update="@form"/>
</h:form>

UniqueValueValidator :

@Named
@FacesValidator("uniqueValueValidator")
public class UniqueValueValidator implements Validator {

    @Inject
    private DBService service;

    @Override
    public void validate(FacesContext context, UIComponent component, Object obj) {

        Object inputValue = ((UIInput) context.getViewRoot().findComponent("formId:value")).getSubmittedValue();

        if(service.isValueNotUnique((String) inputValue) {
            // throw ValidatorException 
        }
    }

}

}

This approach, like yours, implies a round-trip client-server-client of the inputed content on each keyup event. If this is not necessary, you can avoid it with a javascript approach as explained in the other answer.

Links

• The BalusC Code: Validator for multiple components
• jsf validate two fields in one time

Answer 2

You can get rid of the ajax request in the p:inputText and simply copy the value from the input to the inputtext with jquery as the follows:

<h:form id="myForm">
    <p:inputText id="value" value="#{myBean.value}" onkeyup="$("#myForm\\:example").html($(this).val()">
        <f:validator binding="#{uniqueValueValidator}" />
    </p:inputText>
    <h:outputText id="example" value="#{myBean.value}">
    <p:commandButton value="Save" action="#{myBean.saveValue}"/>
</form>