Issue with <f: validator> and ajax in JSF

Question

I want to validate two dates in a form before the user do the action. So I got af:validator inside ap:calendar working with ajax, the problem is with the f:attribute. I am passing the start date as a parameter and the validator do not receive this date. However if press the action button, the date parameter is there in validation. I am using this post as a guide. My xhtml is:

    <p:column >
                        <p:calendar  id="txtStartDate" binding="#{txtStartDate}"
                            pattern="dd/MM/yyyy"
                            value="#{myBean.bean.startDate}">                               
                        </p:calendar>
                    </p:column>
                    <p:column>
                        <p:calendar id="txtEndDate"
                            pattern="dd/MM/yyyy"
                            value="#{myBean.bean.endDate}">
                            <f:validator validatorId="validator.dateRangeValidator" />
                            <f:attribute name="fromDate" value="#{txtStartDate.value}" />                                
                            <p:ajax event="dateSelect" execute="@Form" update=":formHeader:messages" />
                        </p:calendar>
                    </p:column>

And Validator:

@Override
public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException {
    if (value == null || component.getAttributes().get("fromDate") == null) return;

    Date endDate   = (Date) value; 
    Date startDate = (Date) component.getAttributes().get("fromDate");

    if (!endDate.after(startDate)) {
        FacesMessage message = new FacesMessage("End date before the start date.");
        message.setSeverity(FacesMessage.SEVERITY_ERROR);
        addMessageOnSession(FacesMessage.SEVERITY_ERROR, "Invalid dates");
        throw new ValidatorException(message);
    }
}

Appreciate any help with that.

Answer 1

There are a couple of problems that I see here:

execute="@Form"

The above is incorrect. If you wish to execute the whole form the correct value here is @form .

Once correcting this the txtStartDate component should update its binding value and can be set as the attribute for txtEndDate .

Answer 2

Anyway, a quick solution for me was add a listener="" in ajax tag, so I am doing the validation at the bean. I dont know if this is the best way to do this, but solve my problem.

Answer 3

If you are using Primefaces , there is a problem with sending the parameter. They have not support for date.

Your Code:

Date startDate = (Date) component.getAttributes().get("fromDate");

You have to get date as UIInput and parse.

final UIInput startDate = (UIInput) component.getAttributes().get("fromDate");
final String dateFromString = (String) String.valueOf(startDate.getValue());
final SimpleDateFormat parserSDF = new SimpleDateFormat("EEE MMM dd HH:mm:ss Z yyyy", Locale.ENGLISH);
final Date parsedDateTo = parseDate(parserSDF, dateFromString);

For update your form use:

execute="@this" render="yourFormId"

Next hint:

You can change f:ajax event="dateSelect" to f:ajax event="change" for manual change date input. It also works as date select too.