DjValidator is a jQuery plugin for validating HTML forms in a simple, fast and flexible way, it is compatible with bootstrap and any other web design framework.
Only add the jquery library, DjValidator and call a
Validation method, the validation parameters are defined by placing
A single attribute in the fields (data-dj-validator) In addition to the attribute required.
How to download:
With NPM : npm install djvalidator NPM page
With Bower: bower install djvalidator
Github: https://github.com/esneyderg357/DjValidator
Example:
Include the files of the jQuery library and the DjValidator plugin in your HTML document:
<script type="text/javascript" src="/ruta/a/jquery.js"></script>
<script type="text/javascript" src="/ruta/a/DjValidator.js"></script>
To use the DjValidator plugin call the functiondjValidator() selecting a form:
$('#form').djValidator(); //To add the validator to the event submit
If you use ajax or just want to validate (true or false) use:
$('#form').djValidator('validate'); //returns true o false
Add the validation parameters you require in each form field:
<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>
Reference of all possible validations HERE
More information in other entries.
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.
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.
Suscribirse a:
Entradas (Atom)