validaciones - Validación de Beans JSR 303+Validación de cliente de Javascript

validaciones spring mvc

Question

¿Cuál es la mejor forma de realizar la validación de formulario del lado del cliente utilizando Javascript (con una duplicación de código mínima) cuando se utiliza la validación de beans JSR 303 en el lado del servidor? Actualmente estoy usando Spring 3 y el Hibernate Validator .

Answer 1

El marco de validación del lado del cliente de PrimeFaces admite la validación del frijol.

http://blog.primefaces.org/?p=2874

Answer 2

Encontré este proyecto de código abierto pero parece estar muerto, tal vez vale la pena resucitarlo.

http://kenai.com/projects/jsr303js/pages/Home

Esta biblioteca proporciona validación del lado del cliente de un formulario HTML basado en las anotaciones JSR-303 e Hibernate Validator, integrado con Spring MVC. La biblioteca proporciona una base de código de validación de JavaScript que maneja la interacción básica con formularios HTML, así como funciones de JavaScript que implementan las anotaciones de validación admitidas por Hibernate Validator (incluidas aquellas que no pertenecen a la especificación JSR-303). Esta base de código JavaScript se puede incluir en una página utilizando un taglib proporcionado o extrayendo el archivo JavaScript del contenedor e incluyéndolo mediante una etiqueta. Una vez que se ha incluido esta base de códigos en una página, se usa un segundo taglib para generar el código JavaScript para validar un formulario HTML. También puede proporcionar un objeto JSON en el cuerpo de la etiqueta para especificar información de configuración adicional.

Answer 3

Richfaces apoya esto. Tienen una pequeña demostración en su sitio .

Answer 4

Sugeriría que mires Spring JS, que depende en gran medida de Dojo. Un tutorial se puede encontrar here .

La manera más fácil de empezar a jugar con él es descargar Spring Roo , crear la aplicación de muestra petclinic con uno de los scripts de ejemplo (esto le toma 5 minutos) y luego jugar con la integración del javascript. Spring Roo crea una aplicación con la misma pila de tecnología que usas (Spring + hibernate + implementación de jsr 303)

Answer 5

Así es como lo hago usando Spring MVC + JQuery + Bootstrap , parcialmente basado en una publicación de blog reciente en 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<String,String> errors;
    // getters, setters
}

address.jsp:

<f:form commandName="addressForm">
    <div class="control-group">
        <label for="address1">Address 1</label>
        <div class="controls">
            <f:input path="address1" type="text" placeholder="Placeholder Address 1" class="wpa-valid" />
            <span class="help-inline"></span>
        </div>
    </div>
    <!-- etc -->
    <div class="form-actions">
        <button type="submit" class="btn btn-primary">Save</button>
        <button type="button" class="btn">Cancel</button>
    </div>
</f:form>

<script type="text/javascript">
function collectFormData($fields) {
    var data = {};
    for (var i = 0; i < $fields.length; i++) {
        var item = $($fields[i]);
        data[item.attr("id")] = item.val();
    }

    return data;
}

function clearErrors($fields) {
    for (var i = 0; i < $fields.length; i++) {
        var item = $($fields[i]);
        $("#"+item.attr("id")).parents(".control-group").removeClass("error");
        $("#"+item.attr("id")).siblings(".help-inline").html("");
    }
}

function markErrors(errors) {
    $.each(errors, function(key, val) {
        $("#"+key).parents(".control-group").addClass("error");
        $("#"+key).siblings(".help-inline").html(val);
    });
}

$(document).ready(function() {
    var $form = $("form.validate");
    $form.bind("submit", function(e) {
        var $fields = $form.find(".validate");

        clearErrors($fields);
        var data = collectFormData($fields);

        var validationUrl = "validate";
        $.get(validationUrl, data, function(response) {
            $("#alert").removeClass();

            if (response.status == "FAIL") {
                markErrors(response.errors);

                $("#alert").addClass("alert alert-error");
                $("#alert").html("Correct the errors below and resubmit.");
            } else {
                $("#alert").addClass("alert alert-success");
                $("#alert").html("Success!");

                $form.unbind("submit");
                $form.submit();
            }
        }, "json");

        e.preventDefault();
        return false;
    });
});
</script>

Podría usar algunas refactorizaciones, pero esto hará un AJAx GET con los datos del formulario y actualizará la página en función del resultado.