jueves, 11 de mayo de 2017

Easy validation of forms with javascript

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.

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.