How to postpone a keyup ajax request until h:inputText length is reached

Question

Is there a way to postpone a keyup ajax request until a h:inputText value has reached a defined length?

I would like to reach the following goal: a textInput field has to be filled with a combined date and time value. The expected format is: ddMMHHmm

Once the value reaches the length of 8 characters a new event object has to be added to an data list and should be displayed for confirmation immediately. To confirm to add the new event the user simply presses enter inside this textInput field.

I don't know if there are different capabilities than using the ajax keyUp event to validate the input wihtout any further user interaction?

Here you see an very shortened example of my idea:

@Named
@SessionScoped
public class EventController {

  private Date          selectedDate; // +getter/+setter
  private MyEvent       event;
  private List<MyEvent> events; // ArrayList<MyEvent>(), +getter

  @PostConstruct
  private void init() {
     // load current events from DAO
  }

  public void validateInput() {
    event = new MyEvent(selectedDate);
    events.add(event);
  }

  public void confirmEvent() {
    eventDAO.addEvent(event);
}

And the view:

<h:inputText
  value="#{eventController.selectedDate}"
  converter="#{comfortableDateTimeInputConverter}"
  id="inputDateTime">
  <f:ajax
        <!-- pseudo code on  !!! -->
        executeCondition="<lengthOfInputField equals 8>" 
        <!-- pseudo code off !!! -->

        execute="inputDateTime"
        render="eventData"
        event="keyup"
        listener="#{eventController.validateInput}"
  />
</h:inputText>
<h:commandButton ... actionListener="#{eventController.confirmEvent}" />

<h:panelGroup id="eventData">
  <h:dataTable var="..." value="#{eventController.events}">
    // display event properties
  </h:dataTable>
</h:panelGroup>

The ComfortableDateTimeInputConverter extracts the date an time parts of the input string and returns an date object.

I am using

• primefaces 5.2
• mojarra 2.2.8

Edit 1

As suggested by BalusC I modified my h:inputText, but nothing seems to happen. This is my original code exept the controller name. I've added a logging message inside eventController.validateNewEvent, but it seems not to be executed. Did I miss something?

<h:inputText
  readonly="#{empty eventController.selectedPerson}"
  value="#{eventController.selectedDate}"
  id="inputDateTime"
  tabindex="3"
  converter="#{comfortableDateTimeInputConverter}"
  onkeyup="return value.length >= 8"
  onfocus="this.select()">
  <f:ajax
        event="keyup"
        execute="inputDateTime"
        listener="#{eventController.validateNewEvent}"
        render="selectedDate txtDate listEvents" />
  </h:inputText>

Also I tried to render="@all" at the ajax element, but still nothing happens. If i use event="blur" and leave the input with TAB it works like a charme ...

Edit 2 (resolved)

Replaced

onkeyup="return value.length >= 8"

with

onkeyup="return this.value.length >= 8"

and it works. See answer of BalusC ...

Answer 1

Just return false from onkeyup as long as value.length hasn't reached the desired value.

E.g.

<h:inputText ... onkeyup="return this.value.length >= 8">
    <f:ajax event="keyup" ... />
</h:inputText>