¿Cuál es la mejor forma de realizar la validación de formularios del lado del cliente utilizando Javascript (con mínima duplicación de código) al usar la validación de beans JSR 303 en el servidor? Actualmente estoy usando Spring 3 y Hibernate Validator.JSR 303 Validación de frijoles + Javascript Validación del lado del cliente
Respuesta
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)
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.
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
Richfaces es compatible con esto. Tienen un small demo on their site.
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.
PrimeFaces Client Side Validation Framework admite la validación de frijoles.
- 1. GWT JSR 303 validación del cliente
- 2. Validación del lado del cliente de Grails
- 3. Validación del parámetro de método con JSR-303
- 4. Validación del lado del cliente de FluentValidation
- 5. JSF 2.0: ¿Cómo saltarse la validación del bean JSR-303?
- 6. DDD y validación del lado del cliente
- 7. Integrar Validación del lado del cliente
- 8. Validación del lado del cliente ASP.NET MVC
- 9. puedo anular un JSR-303 validación anotación
- 10. Validación del lado del cliente de las tarjetas de crédito
- 11. RegisterOnSubmitStatement después de la validación del lado del cliente
- 12. MVC3 Validación del lado del cliente no funciona
- 13. ASP.NET Validación lado del servidor
- 14. JSF: JSR 303 Validación de frijoles: ¿por qué en getter y no en setter?
- 15. de validación para las clases JAXB generados (JSR 303/primavera)
- 16. Validación personalizada del lado de cliente de ASP.Net
- 17. IValidatableObject en MVC3 - validación del lado del cliente
- 18. MVC3 Validación del lado del cliente errática/inconsistente
- 19. MVC2 Validación del lado del cliente para un DateTime?
- 20. mvc validación del lado del cliente para propiedades anidadas (recopilación)
- 21. ¿Hay una implementación de JSR-303 (validación de bean) disponible?
- 22. Crear validación combinada del lado del cliente y del lado del servidor en Symfony2
- 23. ¿Usando JSR-303 y Validación tradicional de frijol?
- 24. Validación de entrada de usuario, del lado del cliente o del lado del servidor? [PHP/JS]
- 25. ¿Cómo usar las reglas de validación tanto del lado del cliente como del lado del servidor?
- 26. ASP.NET validador propio lado del cliente y la validación del lado del servidor no disparar
- 27. Replicar validación del lado del servidor C# en Javascript
- 28. ¿Evento de incendio después de la validación del script del lado del cliente en asp.net?
- 29. ASP.NET: Sincronización de reglas de validación del lado del cliente y del servidor
- 30. Validación de datos del lado del servidor en Express + node.js
+1 tutorial Niza gracias – stacker