Struts2, Jquery y validación Ajax


Debido a la experiencia de trabajo en LetMeGo he aprendido un poco de JQuery (No al nivel de Lucho pero si como para hacer un trabajo decente).

Un amigo que trabaja en Java – Struts2 (snif) me pidio el favor de darle una luz respecto a validaciones ajax, puesto que en s2.0 se hacia mediante un tema llamado Ajax de s2 (que importaba un monton de librerias Dojo las cuales bajaban el rendimiento) y en s2.1 recomiendan un método similar pero a través del uso combinado del plugin dojo y el interceptor json-validator, en ese tutorial también presentan cómo es posible hacer la validación Ajax mediante Prototype, sin embargo no hay ejemplo de JQuery.

Aquí esta mi versión, lo único que cambia es el script de envío ajax del formulario y la presentación de los mensajes de error, en el método que usa Prototype incluyen los scripts ${pageContext.request.contextPath}/struts/utils.js y ${pageContext.request.contextPath}/struts/xhtml/validation.js, en la versión JQuery no son necesarias, en su lugar usamos el plugin Struts-JQuery para importar desde el CDN de google (mugre google esta en todo) las librerias JQuery, aquí está la versión del script para el tema “simple” de s2 (creo que tambien debería funcionar para el tema xhtml o cualquier otro):

<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="sj" uri="/struts-jquery-tags" %>
<%@ taglib prefix="s" uri="/struts-tags" %>

<html>
<head>
    <title>Validation - Ajax</title>
    <!-- JQuery -->
    <sj:head compressed="true" loadFromGoogle="true"/>
</head>

<s:url id="url" namespace="/validation" action="quizAjax"/>

<body>

<s:form method="post" theme="simple" namespace="/nodecorate" action="quizAjax" id="form" onsubmit="return validate(this);">
	<table>
		<tr>
			<td><s:label key="name"/></td>
			<td><s:textfield name="name" /><br/><s:fielderror fieldName="name"/></td>
		</tr>
		<tr>
			<td><s:label key="age"/></td>
			<td><s:textfield name="age" /><br/><s:fielderror fieldName="age"/></td>
		</tr>
		<tr>
			<td><s:label key="color"/></td>
			<td><s:textfield name="color" /><br/><s:fielderror fieldName="color"/></td>
		</tr>
	</table>
    <s:submit />
</s:form>


<script type="text/javascript">
function validate(form) {
    var dataToBeSent = $(form).formSerialize()+'&amp;struts.enableJSONValidation=true&amp;struts.validateOnly=true';

	$.ajax({
		type : "post",
		url : $(form).attr('action'), 
		data : dataToBeSent,
		datatype : "json",
		success : function(data, textStatus) {
			//elimina los mensajes de error previos
			$(".errorMessage").remove();
			//las respuestas Json usan un wrapper por seguridad que debe ser removido para usar el objeto JSON
			var responseObject = eval("("+data.substring(data.indexOf("\/\*")+2, data.lastIndexOf("\*\/"))+")");
			
			if (isEmpty(responseObject) == false) {
				$.each(responseObject.fieldErrors, function(i,fieldError){
					$('[name='+i+']').after(
							'<ul class="errorMessage"><li>'
							+fieldError+'</li></ul>');
				});
			} else {
				$(form).submit();
			}
		}
	});
	return false;
}
</script> 

Me alegra poder responder de vez en cuando a preguntas de amig@s, existe otro plugin para s2 de JQuery que permitirá hacer esto sin tanto esfuerzo, sin embargo no está dentro del plugin-registry de s2 y me parece que aún no tiene una versión estable, a pesar de eso, creo que a la validación de s2 le haría bien un tema que integre el muy buen JQuery validator plugin como alternativa al modelo de validación s2. Supongo que lo intentaré cuando no esté tan atrasado con mi trabajo.

Acerca de Nickman

Aunque crítico e Ingeniero (especializado en software), piloto de aeroplano soy (seré).

3 pensamientos en “Struts2, Jquery y validación Ajax

  1. Pingback: Los números de 2010 « Vida Np

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s