Validation Error Display

Display validation/conversion errors directly on the UI rather than in the field's tooltip.

View larger

Close

View larger

Close

View larger

Close

The Validation Error Display Add-on helps you display validation error messages directly on the UI, near the field in error, rather than in Vaadin's default tooltip.

View the Developer Guide on GitHub

Sample code

    /**
     * Create a FormLayout component populated with auto-validating fields
     * @return A FormLayout component, never null
     */
    private Component getSampleForm() {
    	/*
    	 * Simple PropertysetItem to back form
    	 */
    	final PropertysetItem item = new PropertysetItem();
    	
    	item.addItemProperty("name", new ObjectProperty<String>("", String.class));
    	item.addItemProperty("age", new ObjectProperty<Integer>(null, Integer.class));
    	item.addItemProperty("catchPhrase", new ObjectProperty<String>("", String.class));
    	
    	/*
    	 * Build Fields
    	 */
    	
    	// Name Field
    	final TextField nameField = new TextField("Name");
    	nameField.setNullRepresentation("");
    	nameField.setRequired(true);
    	nameField.setRequiredError("Required");
    	
    	nameField.addValidator(new StringLengthValidator("Must be 5 to 12 characters", 5, 12, false));
    	
    	// Disable validation for initial form display; add a ValidationBlurListener (included with add-on) to trigger validation onBlur
    	nameField.setValidationVisible(false);
    	nameField.addBlurListener(new ValidationBlurListener(nameField));
    	
    	// Extend the name field with the Validation Error Display add-on - explictly setting the placement
    	ValidationErrorDisplay.displayFor(nameField, ErrorMessagePlacement.BELOW);
    	
    	
    	// Age Field
    	final TextField ageField = new TextField("Age");
    	ageField.setNullRepresentation("");
    	ageField.setRequired(true);
    	ageField.setRequiredError("Required");
    	
    	ageField.addValidator(new IntegerRangeValidator("Must be 0 to 99", 0, 99));
    	ageField.setConversionError("Invalid integer");
    	
    	// Disable initial validation; add a ValidationBlurListener
    	ageField.setValidationVisible(false);
    	ageField.addBlurListener(new ValidationBlurListener(ageField));
    	
    	// Extend to show error messages on UI - not setting the placement, allowing the form container to determine
    	ValidationErrorDisplay.displayFor(ageField);
    	
    	
    	// Catch phrase Field
    	final TextField catchPhraseField = new TextField("Catch Phrase");
    	catchPhraseField.setNullRepresentation("");
    	
    	catchPhraseField.addValidator(new Validator() {
			@Override
			public void validate(Object value) throws InvalidValueException {
				if("EAT MY SHORTS".equalsIgnoreCase(value == null ? "" : value.toString())) {
					throw new InvalidValueException("Sorry, that's taken");
				}
			}
		});
    	
    	catchPhraseField.setValidationVisible(false);
    	catchPhraseField.addBlurListener(new ValidationBlurListener(catchPhraseField));
    	
    	ValidationErrorDisplay.displayFor(catchPhraseField);
    	
    	
    	/*
    	 * Field Group to bind fields to PropertysetItem
    	 */
    	final FieldGroup fieldGroup = new FieldGroup(item);
    	fieldGroup.bind(nameField, "name");
    	fieldGroup.bind(ageField, "age");
    	fieldGroup.bind(catchPhraseField, "catchPhrase");
    	
    	// Buffer so validations also occur on commit
    	fieldGroup.setBuffered(true);
    	
    	/*
    	 * Submit button to commit field changes to underlying item
    	 */
    	Button saveButton = new Button("Save", new ClickListener() {
			@Override
			public void buttonClick(ClickEvent event) {
				try {
					// Set all validation visible before calling commit so validation will occur
					for(AbstractField<?> field : Arrays.asList(new AbstractField[] {nameField, ageField, catchPhraseField})) {
						field.setValidationVisible(true);
					}
					
					// Calling commit triggers validation of all bound fields - validation errors will be displayed if any exist
					fieldGroup.commit();
					
					// If no field errors, then no exception is thrown and save can proceed
					Notification.show("Save succeeded.", Type.HUMANIZED_MESSAGE);
					
					
					// Disable validations again and then clear the form to simulate loading a new backing object
					for(AbstractField<?> field : Arrays.asList(new AbstractField[] {nameField, ageField, catchPhraseField})) {
						field.setValidationVisible(false);
					}
					
					fieldGroup.clear();
				}
				catch(CommitException e) {
					Notification.show("Errors exist on form.", Type.ERROR_MESSAGE);
				}
			}
		});
    	
    	
    	/*
    	 * Form layout to display everything 
    	 */
    	FormLayout formLayout = new FormLayout(nameField, ageField, catchPhraseField, saveButton);
    	
    	// Add one of the following style classes to define default error message placement for all contained fields that don't have explict overrides
    	// Possible values: err-form, err-form-right, err-form-above, err-form-below
    	formLayout.addStyleName("err-form-right");
    	
    	return formLayout;
    }

Links

• Author Homepage
• Online Demo
• Issue Tracker
• Source Code
• Discussion Forum

Compatibility