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ó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ñ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é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"/> <input type="reset" name="resetear" id="res1" value="Limpiar">
</p>
</form>
</td>
</tr>
</table>
<p> </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.