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