2010-03-25 13 views

Respuesta

5

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

La manera más fácil de comenzar 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 cómo se integra el javascript. Spring Roo crea una aplicación con la misma pila de tecnología que usted usa (Spring + hibernate + implementación de jsr 303)

+0

+1 tutorial Niza gracias – stacker

5

Encontré este proyecto de código abierto pero parece muerto, quizás valga 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 JSR-303 y anotaciones de 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.

+0

Sin duda vamos a probar esto. Establecer la validación en el bean y hacer que se replique automáticamente en el cliente es el camino a seguir – Erich

4

Así es como lo estoy haciendo uso de Spring MVC + + JQueryBootstrap, parcialmente basado en 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<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> 

Se podría utilizar un poco de refactorización, pero esto va a hacer una ajax obtiene con los datos del formulario y actualizar la página en función del resultado.

Cuestiones relacionadas