How to validate fields in vaadin made form

Question

I am making a Java project with vaadin. Right now I have a user registration form looking like that:

public class RegistrationComponent extends CustomComponent implements View {

    public static final String VIEW_NAME = "Registration";
    public RegistrationComponent(){
        Panel panel = new Panel("Registration Form");
        panel.setSizeUndefined();
        FormLayout content = new FormLayout();
        CheckBox checkBox1, checkBox2, checkBox3;
        checkBox1 = new CheckBox("Check Box 1");
        checkBox2 = new CheckBox("Check Box 2");
        checkBox3 = new CheckBox("Check Box 3");
        checkBox1.setRequired(true);
        checkBox2.setRequired(true);
        TextField mailTextField = new TextField("Email Address");
        TextField passwordTextField = new TextField("Password");
        TextField confirmPasswordTextField = new TextField("Confirm Password");
        final Button submitButton = new Button("Submit");
        content.addComponent(mailTextField);
        content.addComponent(passwordTextField);
        content.addComponent(confirmPasswordTextField);
        content.addComponent(checkBox1);
        content.addComponent(checkBox2);
        content.addComponent(checkBox3);
        content.addComponent(submitButton);
        content.setSizeUndefined(); // Shrink to fit
        content.setMargin(true);
        panel.setContent(content);
        setCompositionRoot(panel);



        //listeners:

        submitButton.addClickListener(new Button.ClickListener() {
            public void buttonClick(Button.ClickEvent event) {
                //
            }
        });

    }
    @Override
    public void enter(ViewChangeListener.ViewChangeEvent event){
        //
    }
}

Of course, the form doesn't do anything other than being displayed. What I wanna do, is make Vaadin display error messages next to fields if some requirements are not met. The requirements themselves are not that important (lets say I want email field to contain at least 8 characters). What I wanna know, is: is there any simple built-in way to do that? I was here: https://vaadin.com/api/com/vaadin/data/Validator.html

but I dont understand how to use a validator, or even if that is what I want to use. I've been looking all over google for usage examples, but so far with no success. Thanks for help!

Answer 1

Vaadin 7

The following applies to Vaadin 7. The validate() method has been removed in Vaadin 8.

All Field types in Vaadin implement the Validatable interface which has the addValidator method that accepts an implementation of Validator as parameter.

So to add a validator that checks the length of the value of a TextField, you would do this:

TextField textField = new TextField();

        textField.addValidator(

                new StringLengthValidator(
                     "Must be between 2 and 10 characters in length", 2, 10, false));

Vaadin fields have built-in functionality for displaying the validation errors to the user. By default, the field will be highlighted in red and an exclamation mark will appear next to the field, hovering over this will show a more detailed message to the user.

Automatic Validation

By default, the field will now validate on the next server request which contains a changed value for the field to the server. If the field is set to 'immediate', this will happen when the field looses focus. If the field is not immediate, validation will happen when some other UI action triggers a request back to the server.

Explicit Validation

Sometimes, you may want to exercise more control over when validation happens and when validation errors are displayed to the user. Automatic validation can be disabled by setting validationVisible to false.

textField.setValidationVisible(false);

When you are ready to validate the field (e.g. in a button click listener) you can explicitly call the validate (you can also use commit() if it is a buffered field) method on the TextField instance to trigger validation. validate will throw an InvalidValueException if the value is invalid. If you want to use the builtin display of validation errors included in the TextField component you will also have to set validationVisible back to true.

try {
    textField.validate();
} catch (Validator.InvalidValueException ex) {
    textField.setValidationVisible(true);
    Notification.show("Invalid value!");
}

Note that once validationVisbible is set back to true, validation will happen implicitly so you must remember to set it back to false on the next request if you want to maintain explicit control over validation.

Validation Messages

Individual validation messages can be extracted from the instance of Validator.InvalidValueException which is thrown when validate() or commit() is called.

try {
    textField.validate();
} catch (Validator.InvalidValueException ex) {
    for (Validator.InvalidValueException cause: ex.getCauses()) {
        System.err.println(cause.getMessage());
    }
}

Validators

Validators implement the Validator interface and there are several useful validators shipped with Vaadin. Check out the API docs for more information on these: https://vaadin.com/api/7.4.5/com/vaadin/data/Validator.html

Custom validators are easy to implement, here is an example taken from the Book of Vaadin:

class MyValidator implements Validator {
    @Override
    public void validate(Object value)
            throws InvalidValueException {
        if (!(value instanceof String &&
                ((String)value).equals("hello")))
            throw new InvalidValueException("You're impolite");
    }
}


final TextField field = new TextField("Say hello");
field.addValidator(new MyValidator());
field.setImmediate(true);
layout.addComponent(field);

Answer 2

Problem solved, Apparently I wasn't looking deep enough before. Here it comes:

field.addValidator(new StringLengthValidator("The name must be 1-10 letters (was {0})",1, 10, true));

all details here: https://vaadin.com/book/-/page/components.fields.html

Answer 3

Vaadin 8

Using Vaadin 8 com.vaadin.data.Binder easily you can validate your fields. See Binding Data to Forms in the manual.

Create a TextField and a binder to validate the text field.

public class MyPage extends VerticalLayout{
     TextField investorCode = new TextField();
     Binder<MyBean> beanBinder = new Binder<MyBean>();
     //Info : MyBean class contains getter and setter to store values of textField.

     public MyPage (){
         investorCode.addValueChangeListener(e->valueChange(e));
         addComponent(investorCode);
         bindToBean();
     }

     private void bindToBean() {
         beanBinder.forField(investorCode)
         .asRequired("Field cannot be empty")
         .withValidator(investorCode -> investorCode.length() > 0,"Code shold be atleast 1 character long").bind(MyBean::getInvestorCode,MyBean::setInvestorCode);
     }

     //rest of the code .....
     private void valueChange(ValueChangeEvent<String> e) {
         beanBinder.validate();
     }
}

Call validate() from binder will invoke the validation action.

beanBinder.validate(); 

to validate the filed. You can call this from anywhere in the page. I used to call this on value change or on a button click.