Self validating component

Flow
1

Hi.
I have problem/question. I have my own component (PhoneNumberField), which extends TextField. I want to autovalidate it after somebody writes a wrong number. This component is then bind to binder.

I know that the simplest solution is to add Validator to binder for that component, but then I will need to add this Validator to every binding where I use PhoneNumberField. I don’t want to do this. I dont want to use patterns too, because number is a complex string, which changes due to selected country.

Somebody have a solution for this? Am I missing something?

2

If you want to validate a phone number with javascript, you have cleave.js already used in Vaadin 8 add-on https://vaadin.com/directory/component/textfield-formatter

If you want to validate the phone number from java, I think you ave to add our PhoneValidator each time you bind it. (I have no soluton for this :stuck_out_tongue: )

3

Let me see if i understand that correctly, depending on parameters like country the validation would be different.

How about you put validation logic in a method, and bind that method to Binder as Validator ?

Something like that

![https://i.imgur.com/o7nGWnX.png]
(https://i.imgur.com/o7nGWnX.png)

In the validation method you check the incoming String, check the Country or more parameters, and then pick the right validation.

4

Yes, I know I can do this like you said:

Michał Lessner:
I know that the simplest solution is to add Validator to binder for that component, but then I will need to add this Validator to every binding where I use PhoneNumberField. I don’t want to do this.

But I don’t want to add validator whenever I use PhoneNumberField, because I will have to add this in every place, because this Validation algorithm will never change for this field.

5

I don’t know how you can add a server side validation inside the component because since vaadin 8 the validator/converter has been moved to the binder.

You don’t want client side validation ? (perhaps it’s not enough but as a user I like it)

6

What about an “onChangeListener” ? You can bind that directly to TextField.

I actually do not understant the “I will have to add this in every place” part.

You will use the same Field, but in some other Compositions you do not want to make an validation ?

Do you know exactly when you need to validate ? Can your Validator somehow read a boolean if it is needed ?
Maybe with Supplier<Boolean>?

7

Vilius Kukanauskas:
I actually do not understant the “I will have to add this in every place” part.

Let’s imagine a scenario where I have 3 separate views. Each one of them at some point uses my custom component defined as follows:

PhoneNumberField extends TextField{
	...
	@Override
	boolean isInvalid() {
		return /*validate value with phone number format*/;
	}
}

Currently binder disregards isInvalid method implemented in my custom textfield, so in each of the 3 views I will have to call:

PhoneNumberField phoneNumber = new PhoneNumberField();
binder.forField(phoneNumber).withValidator(new PhoneNumberValidator()).bind(getter, setter);

What i would like to achieve is for binder to, in addition to all explicitly defined validators, include a call to isInvalid() method of the phoneNumber upon validation. So the resulting code utilizing my PhoneNumberField should look like this:

PhoneNumberField phoneNumber = new PhoneNumberField();
binder.forField(phoneNumber).bind(getter, setter);

Using .withValidator(new PhoneNumberValidator()). becomes optional.

8

I haven’t tested this myself but you may do something like this -
(1) Create a class named InternalPhoneNumberField with appropriate isInvalid() method for validating the phone number.
(2) Create PhoneNumberField class by extending AbstractCompositeField with InternalPhoneNumberField as its content.