Polymer webcomponents required fields best practice

Hello ,
when i use " vaadin-text-field value=“{{xx}}” required "
Is there a way inside of vaadin-core check all required fields before pressing a button.
or i have to do it by writing a control code inside of the buttons click?

What i am seraching for is an automatic mechanism will disable the button until all required fields will fill ?

I’d recommend you to not use disabled button pattern, it is questionable in terms of UX, as described in this [blog post]
(https://axesslab.com/disabled-buttons-suck/). There is the official [iron-form]
(https://github.com/PolymerElements/iron-form) Polymer element, which you can use instead. It implements the validate method called on form submit and checks the state of all the required form items.

The Vaadin components, including vaadin-text-field, vaadin-date-picker and vaadin-combo-box, are designed and tested to work with the iron-form, as well as some Paper elements. And this is how the native form validation actually works in the browser, with the native input elements.

Of course, using the iron-form does not cause any restrictions to send the form data to the server via it. You can just add listener for the iron-form-presubmit event and call preventDefault, then implement your own custom submission, e. g. AJAX request or the other action you need.

If you still want to disable the submit button, based on the state of the fields, you could use multi-property observer to the properties bound to the value property of the elements. But that would lead to more verbose and less extensible (and maintaible) code in case of the big quantity of form elements.

Hello Sergey ,

Thank you for the information these are what i was actually looking for .
On the disabled button issue , i think you are right , it might annoyed people. It annoyes me.

Thanks again.