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.

No hay comentarios:

Publicar un comentario