Differentiate between validation on input change and whole form submit

Vaadin 6 / 7 / 8 Framework Data Binding
1

Hi guys,

I’m writing application in vaadin 8 and I use binders to validate the forms. I write my own validator, which compare current value with old one and let user decide, what he want’s to do. For this reason, I use Pop-up window, which is open after user change the value. This works fine but after user press submit, whole form is validated and if there is more conflicts, he will get to many windows poping up, which is not much user friendly.

So my question is, can I somehow differentiate in custom Validator, if is called from user input on change or after submit button which trigger whole “binder.validate()” function?

2

Hi Martin,

In Vaadin 8 the validation will happen once the field has changed, regardless of pressing a submit button or not. For example if you write a wrong value in a TextField and wait a bit (even before bluring out of the field), the validation will be triggered.

What kind of extra code you have in the submit button, maybe all the logice should go inside its click listener to differentiate between field change and submit click?

–
A^2

3

Instead of opening the popup when submit button is clicked, I would use this interface h
ttps://vaadin.com/download/release/8.1/8.1.6/docs/api/com/vaadin/data/BindingValidationStatusHandler.html
 and override statusChange(BindingValidationStatus<?> statusChange) method to control opening opening the popup. This way popup is opened when validation error happens in specific field and they do not jump in the face at the same time. Using custom BondingValidationStatusHandler also overrides the default error mechanism, so you will not have the exclamation mark in the field.

4

@AMahdy, @Tatu

thanks for the quick replay!

I will try to describe more, how the problem looks like. I use Vaadin validation on fields with binder - that all works really fine and there is no problem. After value change, validators are triggered and when value is wrong, fields is marked with red color, error description and the “!” sign. That’s perfect and that I want to keep.

What is more custom code, is behavior of submit button. After user press submit button - he will get fields marked with red and also he get notification with list of errors (it’s tray notification). List could look like this: “Please, fill username. Please, fill your age, Please, fill something…etc.”.

Besides that, I have implemented my own validator. Which compare current value and previous value. If the value is differend, user is notified with some logic, to decide what to do. For that, there is separatre window, which is called from validator. This also works fine but when user press submit button, it’s no point, to show him again the 10 windows,
so the question is, can I in validator somehow differentiate between whole form validation (after submit button) and between only one value change? To show him on submit press only list with errors and then, after he will modify the value trigger again the compare window? One solution, which I currently think about is to use session and put in session flag, that it’s from submit button and then remove it, afterwards.

Here is snippet of code from my CustomValidator:

    @Override
    public ValidationResult apply(Object value, ValueContext context) {
        
        if(compare == null || acceptValue) {
            return ValidationResult.ok();
        }
        
        T oldValue = (T) fieldFunction.apply(compare);
        T currentValue = (T) value;

        this.currentContext = context;
        
        if(value != null && value.equals(oldValue)) {
            return ValidationResult.ok();
        }else{
            
            String message = "Current value: " + currentValue + " - old value: " + oldValue;
            
            compWindow = new CompareWindow(message, context.getComponent(), this);
            UI.getCurrent().addWindow(compWindow);
            
            return ValidationResult.error("There is missmatching");
        } 
    }
5

I may have misunderstood something, but you probably don’t want to mislead the overall form validation to think everything is okay when it’s not. So even if you don’t trigger a new popup, ValidationResult.ok() might not be the way to go?

As an alternative approach, could you perhaps only enable the button once the form is valid, so that there is no possibility to trigger multiple validation error popups at the same time to start with?

6

I’m still wondering what’s special behind the “submit button” that triggers validation, and it doesn’t get otherwise triggered on field changes.

Here is what I understood so far:
1- Field is shown with a value.
2- If value got changed, validation is triggered right away.
3- Modified newValue does not equal old value, that’s why a pop up appears.

4- What happens here? After user closes the pop up, do you update the bean with modified value? Do you keep the “There is missmatching” error message nevertheless? How can the validation accepts the modified value?

5- Users clicks the submit button, then what? what triggers the validator again? do you explicitly call binder.validate() on submit? If the bean bound to the fields is not updated then the validator will still show pop up windows.

–
A^2