TextField required error

Flow
1

Hello,

I make an update from Vaadin 8 to Vaadin 24 and have some questions about required errors. Here is a little example for better explanation:

TextField tfPLZ = new TextField("PLZ");
tfPLZ.setPlaceholder("PLZ needs exact 5 digits.");
tfPLZ.setRequiredIndicatorVisible(true);
tfPLZ.setAllowedCharPattern("[0-9]");
tfPLZ.setMinLength(5);
tfPLZ.setMaxLength(5);
tfPLZ.setErrorMessage("PLZ needs exact 5 digits.");

Button bSave = new Button("Save");
bSave.addClickListener(new SaveButtonListener());
add(bSave);

private class SaveButtonListener implements ComponentEventListener<ClickEvent<Button>> {
    @Override
    public void onComponentEvent(ClickEvent<Button> buttonClickEvent) {
       if(tfPLZ.isInvalid()) {
          System.out.println(tfPLZ.getErrorMessage());
       }  else {
          System.out.println("PLZ is valid.");
       }
    }
}
  1. Don’t focus the Textfield, just click on the Button ‘Save’.
  2. At the console of the development environment appears the message ‘PLZ is valid.’ although it’s wrong.
  3. Click to the TextField.
  4. Click to ‘Save’.
  5. At the console of the development environment appears the message ‘PLZ is valid.’ although it’s wrong.
  6. Insert the digit 3 into the TextField and afterwards click ‘Save’.
  7. The UI shows now the red error message ‘PLZ needs exact 5 digits.’. The same message appears at the console of the development environment.
  8. Insert the number 33333 into the TextField and click ‘Save’.
  9. The red error message at the UI disappears but at the console of the development environment appears no message of the listener.
  10. Click again ‘Save’.
  11. Now the message ‘PLZ is valid.’ appears at the console of the development environment.

My questions:

  1. How do I have to implement the validation so that the steps 2-5 will be solved correct, to be specific:
    a. Show the error message after click at ‘Save’ although there was no focus at the TextField.
    b. Show the error message after click at ‘Save’ although there is no entry at the TextField and the focus was at the TextField.
  2. The message ‘PLZ is valid.’ should appear at the console after only one click at ‘Save’ for the situation described at steps 8-11. How can I avoid clicking twice?
2

Short personal note: Don’t use the fields validation - use the Binder and its validations: Binding Data to Forms | Data Binding | Flow | Vaadin Docs

1 Like
3

Given that field validation exists though, I wonder why it’s not possible to trigger validation manually to support this use case. It looks like it should be possible to call textField.validate() and have it update the invalid state.

1 Like
4

Only in a world where it is not protected :)

1 Like
5

Thank you for your answer. I also tried my example with the Binder, but it didn’t work or I made a mistake, I don’t n know. For the current update, I would prefer, not using the Binder because there are too many changes at the code of our big project that have to be done. In future, it will be an option, that we use it, but not for now.

6

Yes, unfortunately the method is protected. Have you any other idea, @sissbruecker ?

7

No good ones, Binder is indeed the appropriate solution for this as of now.

1 Like
8

Hi there,
I think you can set the field required with setRequired or in the binding creation with asRequired.
If not, empty values are valid too.

And yes, using the Binder centralizes validation and we use this approach within our application too. (also updating from V8 to V24)

1 Like
9

I’ve created an issue to address this limitation and allow developers to trigger validation manually:

Please follow this issue for updates and feel free to give it a thumbs-up.

10

By using the Binder, the example works. We will change this to the Binder in our real project, too. Thanx for your help!