jueves, 11 de mayo de 2017

Validación fácil de formularios con javascript

DjValidator es un plugin de jquery para validación de formularios HTML de forma simple, rápida y flexible, es compatible con bootstrap y cualquier otro framework de diseño web.

Solo agregue la libreria de jquery, la libreria de  DjValidator y llame a un método de validación, los parámetros de validación se definen colocando un único atributo en los campos (data-dj-validator) además del atributo required.


Como descargar:

Con NPM : npm install djvalidator                           página NPM
Con Bower: bower install djvalidator
Github: https://github.com/esneyderg357/DjValidator


Ejemplo:

Incluya los archivos de la librería de jQuery y el plugin DjValidator en su documento HTML:

 <script type="text/javascript" src="/ruta/a/jquery.js"></script>
 <script type="text/javascript" src="/ruta/a/DjValidator.js"></script>

Para usar el validador en español incluya otro archivo adicional:

<script type="text/javascript" src="/ruta/a/DjValidator-es.js"></script>

Para usar el plugin DjValidator llame a la  función  djValidator() seleccionando un formulario:

 $('#form').djValidator(); //para agregar el validador al evento submit


Si utiliza ajax o quiere solo realizar validación (true o false) use:

 $('#form').djValidator('validate'); //método que devuelve true o false


Agregue los parámetros de validación que requiera en cada campo del formulario:

<form id="form" class="form-horizontal">
<fieldset>
<legend>Campos de texto</legend>
<div class="form-group">
  <label class="col-md-4 control-label" for="textarea">Texto (text)</label>
  <div class="col-md-8">                
    <textarea class="form-control" name="textarea" data-dj-validator="text,3,12" required></textarea>
  </div>
</div>
<div class="form-group">
  <label class="col-md-4 control-label" for="textinput">Texto alfabético (atext)</label>
  <div class="col-md-8">
  <input name="textinput" type="text" class="form-control input-md" data-dj-validator="atext,3,12" required>
  </div>
</div>
</fieldset>
<div class="form-group">
  <label class="col-md-4 control-label" for="singlebutton"></label>
  <div class="col-md-8">
    <button type="submit" id="validate" name="singlebutton" class="btn btn-primary">Enviar</button>
  </div>
</div>
</form>



Referencia de todas las validaciones posibles AQUI
Más información en las demás entradas.

No hay comentarios:

Publicar un comentario