Problemas de Validacion de Datos con MooTools

RodmanII · #1 (**permalink**) 18/11/2011, 22:38

Tengo yo el siguiente código para la validación de formularios:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Validación de Formularios con MooTools</title>
		<!--Se realiza el vinculo con las hoja de estilos -->
		<link href="\Mootools\MooCSS.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="Cont">
		<table>
			<tr>
			<!-- Se coloco en una tabla para poder definir un fondo, ya que a un DIV solo se le puede definir color de fondo-->
				<td id="Tab1" background="\Mootools\Guita1.jpeg">
				<b>Validaci&oacute;n de Datos con MooTools</b>
				<br>
				<br>
					<form id="frm1" name="formulario" method="post" action="mailto:[email protected]">
					<p>
						<!--Para definir reglas de validación, estas se indican en el atributo 'class' de un elemento -->
						Primer Nombre:<br />
						<!--El campo: Primer Nombre, es obligatorio(required) y solo admite letras (validate-alpha)  -->
						<input name="nombre" type="text" id="nom1" size="40" class="required validate-alpha" />
					</p>
					<p>
						Segundo Nombre:<br />
						<!--El campo: Segundo Nombre, tiene las mismas normas que Primer Nombre-->
						<input name="snombre" type="text" id="nom2" size="40" class="required validate-alpha" />
					</p>
					<p>
						Nombre de Usuario:<br />
						<!--El campo: Nombre de Usuario, el campo es obligatorio y solo admite números y letras(validate-alphanum), no signos y admite una longitud máxima de 22 caracteres-->
						<input name="usuario" type="text" id="us1" size="40" class="required validate-alphanum maxLength:22" />
					</p>
					<p>
						Contrase&ntilde;a:<br />
						<!--El campo: Contraseña es obligatorio(required) y admite letras y números(validate-alphanum) y tiene una longitud mínima de 6 caracteres y una máxima de 18
						de manera que si se escriben mas o menos caracteres, se produce error de validación-->
						<input name="cont" type="password" id="cont1" size="40" class="required validate-alphanum minLength:6 maxLength:18" />
					</p>
					<p>
						Email:<br />
						<!--El campo: Email es obligatorio, se verifica si se introdujo el formato: [email protected] --->
						<input name="email" type="text" id="ema1" size="40" class="required validate-email" />
					</p>
					<p>
						Tel&eacute;fono:<br />
						<!--El campo: Teléfono no es obligatorio, solo admite enteros(validate-integer), no admite decimales-->
						<input name="phone" type="text" id="phone" size="40" class="validate-integer" />
					</p>
					<p>
						<!--Botones de enviar y limpiar -->
						<input type="submit" name="enviar" id="env1" value="Enviar"/>&nbsp;<input type="reset" name="resetear" id="res1" value="Limpiar">
					</p>
					</form>
				</td>
			</tr>
		</table>
		<p>&nbsp;</p>
		<!-- Se utiliza MooTools 1.2.4
		mootools-yui-compressed contiene el core de MooTools,
		mootools-more contiene fValidator, así como Form.Validator y Form.Validator.Inline, necesarias para realizar la validación
		-->
		<script type="text/javascript" src="/Mootools/mootools-yui-compressed.js"></script>
		<script type="text/javascript" src="/Mootools/mootools-more.js"></script>
		<script type="text/javascript">		
		window.addEvent('domready', function() {
		/*Se establece el lenguaje Español mediante*/
			MooTools.lang.setLanguage("es-ES");
			<!--Se crea una instancia de la clase Form.Validator y se le pasa como parametro el ID del formulario que se desea validar-->
			<!-- Validator.Inline muestra los errores de validación-->
			validate = new Form.Validator.Inline("frm1");			
			$('env1').addEvent('click', function() { <!-- La validación se realizara al hacer click sobre el elemento 'env1' que en este caso es el boton submit-->
				validate.validate();
			});
		});
		</script>
		</div>
	</body>
</html>

Pero solamente funciona en Chrome, lo he probado con IE 8, Safari 5.11, Firefox 7, y Opera 11, use MooTools 1.2.4, pero también intente con la version 1.4.

En IE me tira el siguiente error:
Detalles de error de página web

Lo tira dos veces
Mensaje: Error desconocido en tiempo de ejecución
Línea: 175
Carácter: 77
Código: 0
URI: file:///L:/Mootools/mootools-yui-compressed.js

En Opera me dice que no se ha cargado el script, o que se hace referencia a un valor null, pero como entonces si funciona en Chrome.

Firefox me dice que:
Error: window.addEvent is not a function
Archivo de origen: file:///L:/Mootools/Moo1.html
Línea: 67

Y Que no se encuentra el elemento, solo asi.
Necesito con urgencia hacer trabajar este codigo, tengo que implementar a fuerza MooTools, no puedo usar ninguna otra alternativa, de antemano, Muchas gracias. Adios.

bladicito · #2 (**permalink**) 21/11/2011, 02:30

Hola

en tu lugar yo cargaria los scripts en el head y segundo en tu Evento añade un stop para detener la accion predeterminada:

$('env1').addEvent('click', function(e) {
e.stop();
validate.validate();
});

pero para sacar provecho del validador de mootools mira aqui:

http://mootools.net/docs/more/Forms/Form.Validator

saludos