DjValidator

Description

DjValidator is a jQuery plugin for form validation on the front-end in a simple, fast and flexible way, it is compatible with bootstrap and any other web design framework.

Characteristics:

• Only requires Jquery, 1.5.1 or higher, it does not depend on any UI framework.
• Validation rules are placed using a single attribute (data-dj-validator), it also recognizes the "required" attribute and validates the field as mandatory.
• The plugin requires a maximum of 2 parameters.
•  Compact multifunction validation rule set, fast writing.
• Different ways to apply validation.
• Ability to create own validators using 3 alternatives.
• Ability to modify the validation rules dynamically.
• Ability to modify or translate validation messages.
• Ability to change the style of validation messages.
• You can modify the style and messages globally, avoiding specifying in each use of the validator.

All examples and descriptions use bootstrap, although the library does not require it.

Download

Download DjValidator from npm: npm install djvalidator
Download DjValidator from bower: bower install djvalidator

Github: https://github.com/esneyderg357/DjValidator
Page in npm : https://www.npmjs.com/package/djvalidator

Installation

To use DjValidator, include the jQuery library and the DjValidator source file into your HTML document:

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/DjValidator.js"></script>

Use jquery 1.5 or higher.

How to use the plugin:

You can find full examples on folder from DjValidator download.

1. Add jquery and djValidator scripts in your html file:

<script type="text/javascript" src="../lib/jquery/jquery.js"></script>

    <script type="text/javascript" src="../dist/DjValidator.js"></script>

2. Coloque las reglas de validación:

* Add the 'novalidate' attribute to disable browser validation.

* Add validation rules on field forms (data-dj-validator), 'required' attribute is valid:

<input name="input1" type="text" data-dj-validator="atext,3,12" required>

Rules reference: http://djvalidator.blogspot.com/2017/04/validators-reference.html 

3. Use one of these validation modes:

Validation is executed in the submit event of the form, preventing the submission from being invalid:

$('#form').djValidator(); 

Validation is executed in the submit event of the form, avoids sending and executes the parameter function if it is valid:

$('#form').djValidator('callback',function($form){

alert("Callback executed when the form is valid.");

});

La validación se ejecuta en el momento de ejecutar el plugin, devuelve true o false según el resultado:

var resp=$('#form').djValidator('validate');

alert("only validate form: "+resp);

The validation is executed at the moment of executing the plugin, it returns true or false according to the result:

var resp=$('#input1').djValidator('field')

alert("only validate a field: "+resp);

Clears all validation messages placed by the validator:

$('#form').djValidator('clean');

Full API reference: http://djvalidator.blogspot.com/2017/04/api-reference.html 

Personalization:

Customize validation messages:

                 <input name="user" required data-dj-validator-msg="Please fill the user!">

Change all validation messages (see the Spanish translation of the download for the complete example):

$.setDjValidatorLabels({

required:'Campo requerido.',

word_min:'Por lo menos $1 caracteres sin espacios.',

word_between:'Entre $1 y $2 caracteres sin espacios.',

…………………………… });

Change style globally:

$.setDjValidatorStyle('display:none; text-align:center; color:white; background-color:red;');

Custom validation rules

It can be done in 3 ways:

1. Adding a new validation rule globally:

       <input name="textinput" type="text" data-dj-validator="regexp,^[aeiou]+$,i" required>

2. Calling a validation function::

        <input name="textinput" type="text" data-dj-validator="call,isUpperCase" required>

     function isUpperCase($field){

value=$field.val();

if(value==value.toUpperCase())return true;

return false;

     }

3. Usando expresiones regulares:

        <input name="textinput" type="text" data-dj-validator="even,10" required>

$.addDjValidator('even','only even numbers.',function($field,args){
value=parseInt($field.val());
max=args[1];
if(value%2!=1||value>max)return false;
return true;
});

Copyright (c) 2018 DjValidator was developed by David Esneyder Jerez Garnica. 

GPLv3 license.

Other plugins:

Json to html loader: DJsonLoader