search

vaadin / flow-and-components-documentation

The documentation for the Vaadin framework version 10+
https://vaadin.com/docs/
16 stars 102 forks source link

Add documentation on how data validation should be used with two-way binding in forms. #270

Open thigg opened 5 years ago

thigg commented 5 years ago

Add documentation on how data validation should be used with two-way binding in forms. Currently the documentation mentions how data binding can be implemented, but not how the data can be validated.

pleku commented 5 years ago

The best way probably would be to use Binder by mapping to the components in the template with @Id mapping. Then validation would be applied on the server side via Binder.

If you want to use client side validation, then you have to write a lot of JS in the template and I think that is quite form/component specific on how it works. Some components support validation, like pattern for input.

Legioth commented 5 years ago

If you want to use client side validation, then ...

Not to mention the fact that you cannot really trust that values received from the client, which means that you also have to ensure the same validation rules are applied on the server as well.

thigg commented 5 years ago

Validation could be done via Bean Validation. So it would be server side.

I imagined something like this when I worked with it:

The Dataflow: Form -(Databinding with poilymer)-> Client Side Model -(Vaadin)-> Server Side View Model -(Vaadin)-> Beanvalidator -(Vaadin)-> Server Side Model So no need for any explicit definitions of binders.

For simple forms I could just create a template and a model class with annotations for validation. For simple use cases, that would be a neat solution. I would only have to specify fields in the Model and the Form.

As of my knowledge this not possible right now without specifying binders explicitly. When I have to specify binders, there is no need for Polymer data binding in templates. And I have to mention each field to the binder.

When I came to this, I imagined the solution above would be possible. If this is not the case, it should be stated in the documentation, that Polymer data binding should not be used with forms.