Validador de Formularios en HTML5

Validador de Formularios HTML5

En esta entrada les hablare de un plugins para validar formularios, no ustedes pero yo estoy cansado de las validaciones manuales, de agregar infinidades de condicionales o de utilizar plugins que mas que facilitar el trabajo nos lo complica ya que la versión gratuita es como si programáramos en nada.

Es por ello que e desarrollado este plugins que utiliza al máximo los características del propio HTML5 y las ultimas API de javascript.

Este plugin pueden descargarlo desde GITHUB y es muy fácil de usar. veamos un pequeña explicación de su uso.

Uso de HTML5VALID

Instalación

Solo debe ingresar las siguientes lineas a su proyecto y listo, fácil rápido y compatible con otros framework 

<link rel="stylesheet" type="text/css" href="../dist/css/html5valid.css"><script src="html5valid.js"></script>

 A partir de esto HTML5VALID toma control y queda a la espera para su ejecución.

Uso

Es sencillo de usar solo debemos agregar el atributo data-role="html5valid" al elemento Form y listo.

Ejemplo

Uso básico.

<form data-role="html5valid" data-online="true" data-on-success="success" data-on-error="error">
 <div class="form-row">
  <div class="col-md-6 mb-3">
    <input type="text" class="form-control" placeholder="Primer Nombre" data-required data-msj="Indique su primer nombre">
  </div>
  <div class="col-md-6 mb-3">
    <input type="text" class="form-control" placeholder="Segundo Nombre">
  </div>
 </div>
 <div class="form-row">
  <div class="col-md-6 mb-3">
    <input type="text" class="form-control" placeholder="Primer Apellido" data-required data-msj="Indique su primer apellido">
  </div>
  <div class="col-md-6 mb-3">
    <input type="text" class="form-control" placeholder="Segundo Apellido">
  </div>
 </div>
 <div class="form-row">
  <div class="col-md-6 mb-3">
    <input type="number"  min="18" max="45" step="1" data-type-valid="min,max" class="form-control" placeholder="Edad" data-required data-msj="Debe agregar una edad comprendida entre 18 y 45">
  </div>
  <div class="col-md-6 mb-3">
   <div class="form-group">
    <div class="form-check">
     <input class="form-check-input" type="checkbox" value="" data-required>
     <label class="form-check-label">
      Acepta los terminos y condiciones?
     </label>
    </div>
   </div>
  </div>
 </div>
 <button class="btn btn-primary" type="submit">Enviar</button>
</form>

Como podemos notar no es nada de validaciones ni cosas complejas solo el uso de los atributos data y ya.

Para ver mas ejemplos y una documentación mas detallada descargue el plugins y acceda a la carpeta docs desde cualquier navegador web.


DESCARGAR PLUGINS