Convalida del bean JSR 303 + Convalida lato client JavaScript

Question

Qual è il modo migliore per eseguire la convalida del modulo sul lato client utilizzando Javascript (con duplicazione del codice minima) quando si utilizza la convalida del bean JSR 303 sul lato server? Attualmente sto utilizzando lo Spring 3 e lo Hibernate Validator.

Answer 1

Ti suggerisco di dare un'occhiata a Spring JS, che fa molto affidamento su Dojo. Un tutorial può essere trovato here.

modo più semplice per voi stessi per iniziare a giocare con esso è quello di scaricare Spring Roo, creare l'applicazione di esempio petclinic con uno degli esempi-scripts (questo si vogliono 5 minuti) e poi giocare con come il javascript è integrato. Spring Roo crea un'applicazione con lo stesso stack tecnologico che usi (Spring + hibernate + implementazione di jsr 303)

Answer 2

Ho trovato questo progetto open source ma sembra morto, forse vale la pena resuscitare.

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

Questa libreria fornisce client convalida lato di un modulo HTML sulla base di JSR-303 e Hibernate Validator annotazioni, integrati con Spring MVC. La libreria fornisce una base di codice di convalida JavaScript che gestisce l'interazione di base con i moduli HTML, nonché le funzioni JavaScript che implementano le annotazioni di convalida supportate da Hibernate Validator (comprese quelle non dalla specifica JSR-303). Questa base di codice JavaScript può essere inclusa in una pagina utilizzando un taglib fornito o estraendo il file JavaScript dal jar e includendolo usando un tag. Una volta che questo codice base è stato incluso in una pagina, viene utilizzato un secondo taglib per generare il codice JavaScript per la convalida di un modulo HTML. È inoltre possibile fornire un oggetto JSON nel corpo del tag per specificare ulteriori informazioni di configurazione.

Answer 3

Richfaces supporta questo. Hanno un small demo on their site.

Answer 4

Ecco come lo sto facendo con Spring MVC + JQuery + Bootstrap, in parte sulla base di 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> 

Si potrebbe usare un po 'di refactoring, ma questo farà un ajax ottenere con i dati del modulo e aggiornare la pagina in base al risultato.

Answer 5

Il framework di convalida lato client PrimeFaces supporta la convalida del bean.

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