DjValidator - español

Descripción

DjValidator es un plugin de jquery para validación de formularios en el front-end de forma simple, rápida y flexible, es compatible con bootstrap y cualquier otro framework de diseño web.

Características:

• ·        Solo requiere Jquery, 1.5.1 o superior, no depende de ningún framework de UI.
• ·         Las reglas de validación se colocan usando un único atributo (data-dj-validator), además reconoce el atributo “required” y valida el campo como obligatorio.
• ·         El plugin requiere un máximo de 2 parámetros.
• ·         Juego de reglas de validación multifuncionales compacto, escritura rápida.
• ·         Diferentes formas de aplicar la validación.
• ·         Capacidad de crear validadores propios usando 3 alternativas.
• ·         Capacidad de modificar las reglas de validación de forma dinámica.
• ·         Capacidad de modificar o traducir los mensajes de validación.
• ·         Capacidad de cambiar el estilo de los mensajes de validación.
• ·         Se pueden modificar el estilo y mensajes de forma global, evitando especificar en cada uso del validador.

Todos los ejemplos y descripciones utilizan bootstrap, aunque la libreria no lo requiere.

Descarga

Descargue DjValidator desde npm: npm install djvalidator

Descargue DjValidator desde bower: bower install djvalidator

En GitHub: https://github.com/esneyderg357/DjValidator
npm : https://www.npmjs.com/package/djvalidator

Instalación

para usar DjValidator, 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>

Utilice jquery 1.5 o superior.

Como usar el plugin:

Puede encontrar todos los ejemplos de uso en la descarga.

1. Agregue los scripts de jquery and djValidator:

<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:

Agregue el atributo “novalidate”, para deshabilitar la validación del navegador.

Agregue la regla de validación en los campos necesarios (data-dj-validator), use el atributo 'required' para campos obligatorios:

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

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

3. Use el plugin con alguna de estas formas:

La validación se ejecuta en el evento submit del formulario, evitando el envío de ser no válido:

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

La validación se ejecuta en el evento submit del formulario, evita el envío y ejecuta la función parámetro en caso de ser válido:

$('#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);

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

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

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

Borra todos los mensajes de validación colocados por el validador (limpieza):

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

Referencia completa del API: http://djvalidator.blogspot.com/2017/04/api-reference.html 

Personalización:

Personalizar mensajes de validación:

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

Cambiar todos los mensajes de validación (vea en la traducción al español de la descarga el ejemplo completo):

$.setDjValidatorLabels({

required:'Campo requerido.',

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

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

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

Cambiar el estilo de forma global:

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

Reglas de validación personalizadas

Se puede realizar de 3 formas:

1. Agregando una nueva regla de validación de forma global:

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

2. Llamando a una función propia de validación:

        <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. Using regular expressions:

        <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 fue desarrollado por David Esneyder Jerez Garnica. 

Licencia GPLv3

Otros plugins:

cargador de datos Json en html: DJsonLoader