binder length check triggers red popup wrongly

[letrthang]

Description

Example below code from https://vaadin.com/docs/latest/binding-data/components-binder-validation#converting-user-input

binder.forField(nameField) // Validator defined based on a lambda // and an error message .withValidator( name -> name.length() >= 3, "Name must contain at least three characters") .bind(Person::getName, Person::setName);

If nameField is empty, then red popup will show.

Expected outcome

Expected: not show red popup message if the input field is empty.

Minimal reproducible example

binder.forField(nameField) // Validator defined based on a lambda // and an error message .withValidator( name -> name.length() >= 3, "Name must contain at least three characters") .bind(Person::getName, Person::setName);

Steps to reproduce

create a input filed that enable data binder as https://vaadin.com/docs/latest/binding-data/components-binder-validation#converting-user-input

Environment

Vaadin version(s): 23/24 Java 17 OS: any

Browsers

No response

[knoobie]

Name must contain at least three characters

name empty == less than three characters --> field invalid.

So where is the problem?

[letrthang]

Name must contain at least three characters

name empty == less than three characters --> field invalid.

So where is the problem?

we expect the textbox will be highlighted red but not showing red popup error message.

[knoobie]

That's not how error messages work. You specify them; they get shown. It would be a big problem if their wouldn't be shown.

[letrthang]

As above photo. if the input text field is empty and I clicks outside of the input text field, then it will hightlight red and keep showing bubbles (empty dialog). If i put whitespace into the input text field, then empty red dialog will stop. So i think maybe the binder cannot validate a NULL value which causes showing empty red dialog.

So i think name.length() >= 3 doesn't cover if input text field is empty

[knoobie]

All those assumption are not related. You have a problem, with validations that return an empty error message (default is required check) - those somehow(?) show weirdly in your case. This is not a default behavior and a reproduceable test-case is highly recommended. Never seen such a behaviour.

[letrthang]

This is my code: binder.forField(textAssetName).asRequired().withValidator(new RegexpValidator("only from 3-30 numeric chars", "^[a-zA-Z0-9_\\-. ]{3,30}$"))

Seem issue is due to my regex incorrect.

[letrthang]

i will close this issue. Thanks @knoobie

[letrthang]

My code:

binder.forField(textAssetName).asRequired()
                .withValidator(new RegexpValidator("Please input between 3-30 characters"), "^[\\s\\w.-]{1,10}$"))
                .withValidationStatusHandler(handler -> showValidationError(handler, binder))
                .bind(AssetDTO::getAssetName, AssetDTO::setAssetName);

When i input the data not match with regex condition, it shows 3 red dialogs at same time. I expected only shows 1 red dialog.

[vursen]

When i input the data not match with regex condition, it shows 3 red dialogs at same time.

This has been fixed for TextField in 24.3, see https://github.com/vaadin/flow-components/issues/5537.

[vursen]

Closing this issue due to inactivity. Please feel free to reopen if further issues arise