change class of spring mvc form when it was validated

Question

I'm using my custom validator which implements org.springframework.validation.Validator;.

@Component("WelcomValidator")
public class WelcomValidator implements Validator {

@Override
public boolean supports(Class<?> clazz) {
    return RegisterForm.class.equals(clazz);
}

@Override
public void validate(Object target, Errors errors) {

    pattern = Pattern.compile(EMAIL_PATTERN);

    RegisterForm rf = (RegisterForm) target;
    // login field validation
    if (rf.getLogin() == null || rf.getLogin().isEmpty()) {
        errors.rejectValue("login", "login.empty");
    }
.....

On my jsp page I've got a form(I'm using bootstrap)

<div class="modal-body">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                            <form:form role="form" id="registrationForm" commandName="registerForm">
                                <div class="form-group" id="inputLogin">
                                    <label for="login">Login</label>
                                    <form:errors path="login" cssClass="glyphicon glyphicon-ok form-control-feedback"/>
                                    <form:input path="login" id="login" name="login" type="text" class="form-control"/>
                                </div>
                                <div class="form-group" id="inputPassword">
                                    <label for="password">Password</label>
                                    <form:errors path="password" cssClass="glyphicon glyphicon-ok form-control-feedback"/>
                                    <form:input path="password" id="password" name="password" type="text" class="form-control"/>
                                </div>
                                <div class="form-group" id="inputPasswordConfirm">
                                    <label for="confirmed_password">Password confirmation</label>
                                    <form:errors path="confirm" cssClass="glyphicon glyphicon-ok form-control-feedback"/>
                                    <form:input path="confirm" id="confirmed_password" type="text" class="form-control" name="confirmed_password"/>
                                </div>
                                <div class="form-group" id="inputEmail">
                                    <label for="email">Email</label>
                                    <form:errors path="email" cssClass="has-error"/>
                                    <form:input path="email" id="email" type="text" class="form-control" name="email"/>
                                </div>
                                <div class="form-group" id="inputFirstname">
                                    <label for="firstname">Firstname</label>
                                    <form:errors path="firstname" cssClass="has-error"/>
                                    <form:input path="firstname" id="firstname" type="text" class="form-control" name="firstname"/>
                                </div>
                                <div class="form-group" id="inputLastname">
                                    <label for="lastname">Lastname</label>
                                    <form:errors path="lastname" cssClass="has-error"/>
                                    <form:input path="lastname" id="lastname" type="text" class="form-control" name="lastname"/>
                                </div>
                                <div class="form-group" id="inputPatronymic">
                                    <label for="patronymic">Patronymic</label>
                                    <form:errors path="patronymic" cssClass="has-error"/>
                                    <form:input path="patronymic" id="patronymic" type="text" class="form-control" name="patronymic"/>
                                </div>
                                <div class="form-group" id="inputJob">
                                    <label for="Job">Job</label>
                                    <form:errors path="job" cssClass="has-error"/>
                                    <form:input path="job" id="job" type="text" class="form-control" name="job"/>
                                </div>
                                <div class="form-group" id="inputSpecialization">
                                    <label for="specialization">Specialization</label>
                                    <form:errors path="specialization" cssClass="has-error"/>
                                    <form:input path="specialization" id="specialization" type="text" class="form-control" name="specialization"/>
                                </div>
                                <div class="form-group" id="inputExperience">
                                    <label for="experience">Experience</label>
                                    <form:errors path="experience" cssClass="has-error"/>
                                    <form:input path="experience" id="experience" type="text" class="form-control" name="experience"/>
                                </div>
                            </form:form>
                        </div>
                    </div>
                </div>

And here my controller's method to validate form

@RequestMapping("/registration.html")
@ResponseBody
public String registration(@ModelAttribute @Valid RegisterForm form,
        BindingResult result) {

    if (result.hasErrors()) {
        logger.debug("ERRORS WAS FOUND. NUMBER OF ERRORS: {}",
                result.getFieldErrorCount());
        for (int i = 0; i < result.getFieldErrors().size(); i++) {
            logger.debug(result.getFieldErrors().get(i).getField() + ":"
                    + result.getFieldErrors().get(i).getCode());
        }
    } else {
        logger.debug("NO ERRORS!");
        User user = new User(form.getEmail(), form.getLogin(),
                form.getPassword(), false);
        Person person = new Person(form.getLastname(), form.getFirstname(),
                form.getPatronymic(), form.getJob(), new Short(
                        form.getExperience()), form.getSpecialization(),
                null);
        logger.debug("USER TO ADD: {}", user.toString());
        personService.saveUserPersone(user, person);
        return "true";
    }

    return false;
}

In debugger it shows that all fields are validating correctly and it shows all errors in console. But I want to add css class to div where all form:input are located when there is an error. For example I want this div

<div class="form-group" id="inputPassword">
                                    <label for="password">Password</label>
                                    <form:errors path="password" cssClass="glyphicon glyphicon-ok form-control-feedback"/>
                                    <form:input path="password" id="password" name="password" type="text" class="form-control"/>
                                </div>

to look something like this if error occurred

                                <div class="form-group has-warning has-feedback" id="inputPassword">
                                    <label class="control-label" for="id="password"">Password</label>
                                    <form:input type="text" cssClass="form-control" id="password"/>
                                    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
                                </div>

How to do it?

Answer 1

If you dont want to modify the code you can replace the tag for a custom tag...I made this custom tag:

<%@tag description="Extended input tag to allow for sophisticated errors" pageEncoding="UTF-8"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="springForm" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@attribute name="name" required="true" type="java.lang.String"%>
<%@attribute name="required" required="false" type="java.lang.Boolean"%>
<spring:bind path="${name}">
    <div class="control-group">
        <c:set var="key" value="form.${name}.label" />
        <c:set var="label">
            <spring:message code="${key}" />
        </c:set>
        <label for="${name}"> ${label} <c:if test="${required}"><span class="required">*</span></c:if></label>
        <springForm:input path="${name}" placeholder="${label}..." id="${name}" class="${status.error ? 'error' : '' }"/>
        <springForm:errors path="${name}" cssClass="has-error"/>
    </div>
</spring:bind>

And in the page it would be:

<%@ taglib tagdir="/WEB-INF/tags" prefix="custom" %>
<custom:input name="email" required="true"/>

It support i18n and also the custom css for the errors, for further references, check the original

Answer 2

Try something like :

<c:set var="passwordError"><form:errors path="password"/></c:set>
<c:if test="${not empty passwordError}">
        <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</c:if>

just change the path for every field