Disable submit button in a form depending on each fields valid status

General
1

Hi,

After releasing a beta version of our Vaadin application, we’re now in the process of implementing what came up from “What went well, what didn’t go well” meetings.

One area we see improvements are Forms. In particular, we came up with the following requirement:


Assumptions

  • A form consists of multiple fields (text, password, drop down boxes, …)
  • Some fields are required, others are not
  • There is a “save” and “cancel” button in the form footer


Requirements

When the form loads, all fields are set to their default value. The “save” button is disabled and stays disabled until a user has filled in all required fields and each field’s validator says the field’s content is valid.
If a user enters an invalid value in a field and the field loses focus, we want to show the error indicator and tooltip message.

How would you approach this?

Thanks,

Mike

2

On any
Field
 that implements
BlurNotifier
, you can add a
BlurListener
. Then, when you get a
BlurEvent
, call the Field’s
commit()
 method. That should make any validation problems visible. From there you can also implement your own logic for enabling/disabling the Save button.

3

You should use isValid() instead of commiting all the time, because that modifies the original object and you methods like isModified() will return the wrong value. To make fields required, call setRequired(true) on the fields. To make validation errors visible on blur, it is enough to make the fields immediate with setImmediate(true). To update the button state, add valuechangelisteners to the fields and call saveButton.setEnabled(form.isValid());