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