JSR 303 Bean Validation + Javascript Client-Side Validation

Question

What is the best way to perform client-side form validation using Javascript (with minimal code duplication) when using JSR 303 bean validation on the server side? I\'m currentl

Answer 1

Here's how I'm doing it using Spring MVC + JQuery + Bootstrap, partially based on a recent blog post at SpringSource:

AddressController.java

@RequestMapping(value="/validate")
public @ResponseBody ValidationResponse processForm(Model model, @Valid AddressForm addressForm, BindingResult result) {
    ValidationResponse res = new ValidationResponse();
    if (result.hasErrors()) {
        res.setStatus("FAIL");
        for (ObjectError error : result.getAllErrors()) {
            if (error instanceof FieldError) {
                FieldError fieldError = (FieldError) error;
                res.addError(fieldError.getField(), fieldError.getDefaultMessage());
            }    
        }
    }
    else {
        res.setStatus("SUCCESS");
    }
    return res;
}

AddressForm.java

public class AddressForm {
    @NotNull
    @Size(min=1, max=50, message="Address 1 is required and cannot be longer than {max} characters")
    private String address1;

    @Size(max=50, message="Address 2 cannot be longer than {max} characters")
    private String address2;

    // etc
}

ValidationResponse.java:

public class ValidationResponse {
    private String status;
    private Map errors;
    // getters, setters
}

address.jsp:

    

        Address 1
        

            
            
        
    
    
    

        Save
        Cancel
    

It could use some refactoring, but this will do an ajax GET with the form data and update the page based on the result.