Mediante fValidator podemos usar JavaScript para validar los campos de un formulario HTML antes de ser enviados. Puede validar campos tipo alfabéticos, numéricos, fecha, coincidencia de campos (contraseñas) y mas. Esta utilidad trabaja con mootools y algunas de sus dependencias: core, class, native, element, effects. Veamos una forma básica de usarlo en nuestro proyectos web.
Pero primero descargar el fValidator, existen dos versiones: un paquete comprimido (3.77KB) y una versión completa (7.20KB). También vamos a necesitar en mootools y las dependencia que sitamos arriba, puede descargarlo desde aqui.
Cómo usarlo
Dentro de las etiquetas <head> </head> llamamos a los archivos JavaScript implicados, e iniciamos el validador para nuestro formulario. Ya dentro de nuestro formulario, en cada campo especificaremos que tipo de dato validará el fValidator. Veamos un ejemplo.
Ejemplo
<html>
<head>
<title>Validando formulario con Javascript</title>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/fValidator.js"></script>
<script type="text/javascript">
window.addEvent("domready", function() {
var exValidatorA = new fValidator("formulario");
});
</script>
</head>
<body>
<form id="formulario" class="fValidator-form" name="formulario" method="post" action="">
<label>Nombres
<input name="nombres" class="fValidate['required']" type="text" id="nombres" />
</label>
<p>
<label>Telefono
<input name="telefono" class="fValidate['required','phone']" type="text" id="telefono" />
</label>
</p>
<p>
<label>Fecha
<input name="fecha" class="fValidate['date']" type="text" id="fecha" />
</label>
</p>
<p>
<label>Contraseña
<input name="contrasena" class="fValidate['required']" type="password" id="contrasena" />
</label>
</p>
<p>
<label>Repetir
<input name="re_contrasena" class="fValidate['required','=contrasena']" type="password" id="re_contrasena" />
</label>
</p>
<p>
<label>e-mail
<input name="email" class="fValidate['required','email']" type="text" id="email" />
</label>
</p>
<p>
<input type="submit" name="Submit" value="Submit" />
<input type="reset" name="Submit2" value="Reset" />
</p>
</form>
</body>
</html>
Como vemos dentro de cada campo en su atributo class llamamos la función fValidate cuyos parametros pueden variar dependiendo de si dicho campo es requerido o no, por ejemplo si es requerido y además es un teléfono sería: fValidate[‘required’,’phone’], pero si el campo pide un telefóno pero es opcional (no requerido) será: fValidate[‘phone’]. Este es un ejemplo sencillo, el la web del autor podemos encontrar mas información al respecto además de un ejemplo mas avanzado el cual implica una validación similar a un control ‘mask’.
Vía | Ajaxian
hola estoy tratando de que funcione el fvalidator, segui los pasos com decis arriba pero automaticamente al cargar la pagina, la consola de errores me da el error:
field.getValue is not a function
marcando el error en la linea 97 del archivo fvalidator.js
Tenes idea que puede ser ???
saludos y gracias de todos modos !
roberto
hola.simplemente para darte las gracias con este estupendo manual.
muyy bueno gracias