TextChangeEvent & Validation

Vaadin 6 / 7 / 8
1

From a usability point of view I want to disable/enable a submit button of a form instantly when a user fills out the form.
It would really make no sense to let the user first click on the button and to tell him afterwards that there is something wrong.
Additionally I want the validation errors to be instantly visible while typing for the same reason.

Using the ValueChangeEvent won’t work, as the user has to change the focus for the input field first before the listener gets triggered. This applies to the enable/disable of the submit button (user has to at least change focus for the last input field) as well as for the instant validation.

Unfortunately using the TextChangeListener the method isValid() wont work, as internally the value was not set.

In the best case I want to use the built in bean-validation mechanisms and a BeanFieldGroup, so how to handle this situation?

2

You could just iterate over the validators and call validate() for the text in the TextChangeListener.

There’s also the fine CSValidation add-on, which validates TextField input without server-side calls, so it’s more responsive. However, that doesn’t help with the submit button. It would be nice if the add-on could fire server-side events when the validation result changes, but then again, that would be half-way to just using TextChangeListener. I suppose you could use a JavaScript validator, pass it the ID of the submit button somehow, and then toggle the button state in the validator. (Notice that there’s a security danger in having such form logic on the client-side.)

3

Ok, thank you for your suggestions :slight_smile: