JSR 303 Проверка валидации + проверка на стороне клиента

Question

Каков наилучший способ проверки на стороне клиента с использованием Javascript (с минимальным дублированием кода) при использовании проверки компонентов JSR 303 на стороне сервера? В настоящее время я использую Spring 3 и Hibernate Validator.

Answer 1

Я бы предположил, что вы смотрите на Spring JS, который в значительной степени полагается на Dojo. Учебник можно найти here.

Самый простой способ начать играть с ним - загрузить Spring Roo, создать приложение для примера петлики с помощью одного из примеров-скриптов (это займет у вас 5 минут), а затем поиграть с тем, как интегрируется javascript. Spring Roo создает приложение с тем же самым стеком технологий, который вы используете (Spring + hibernate + реализация jsr 303)

Answer 2

Я нашел этот проект с открытым исходным кодом, но он выглядит мертвым, может быть, стоит воскресить.

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

Эта библиотека предоставляет стороне клиента проверку в виде HTML, основанного на JSR-303 и Hibernate аннотации средства проверки, интегрированных с Spring MVC. Библиотека предоставляет базу кода проверки JavaScript, которая обрабатывает базовое взаимодействие с форматами HTML, а также функции JavaScript, реализующие аннотации проверки, поддерживаемые Hibernate Validator (в том числе не из спецификации JSR-303). Эта база кода JavaScript может быть включена в страницу с помощью предоставленного taglib или путем извлечения файла JavaScript из банки и включения его с помощью тега. После того, как эта база кода была включена в страницу, второй taglib используется для генерации кода JavaScript для проверки формы HTML. Вы также можете предоставить объект JSON в теге тега, чтобы указать дополнительную информацию о конфигурации.

Answer 3

Richfaces поддерживает это. У них есть small demo on their site.

Answer 4

Вот как я это делаю с помощью Spring MVC + JQuery + Bootstrap, частично на основе 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> 

Он может использовать некоторые рефакторинга, но это будет делать Ajax GET с данными формы и обновить страницу, на основании результата.

Answer 5

Рамка проверки подлинности на стороне клиента PrimeFaces поддерживает проверку бина.

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