How to defer ajax request for keyup until h: input text length is reached

Question

Is there a way to defer an ajax request for keyup until the h: inputText reaches a certain length?

I would like to achieve the following goal: the textInput field should be populated with a combined date and time value. Expected format:ddMMHHmm

As soon as the value reaches 8 characters, a new event object must be added to the data list and immediately displayed for confirmation. To confirm the addition of a new event, the user simply presses Enter inside this textInput field.

I don’t know if there are different possibilities than using the ajax keyUp event to check input without any further user interaction?

Here you see a 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>

ComfortableDateTimeInputConverter retrieves the date of the temporary parts of the input string and returns a date object.

I use

• price lists 5.2
• mojarra 2.2.8

Change 1

As suggested by BalusC, I changed mine h:inputText, but nothing happens. This is my original code except for the name of the controller. I added a log message inside eventController.validateNewEvent, but it doesn't seem to be running. 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 render="@all"on the ajax element, but still nothing happens. If I use event="blur"and leave the input using TAB, it works like a charme ...

Change 2 (allowed)

Replaced by

onkeyup="return value.length >= 8"

with

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

and it works. See BalusC Answer ...

Answer 1

return false onkeyup, value.length .

.

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