Validador de formularios HTML5 personalizado en Vanilla JavaScript-simplemente valide

Vista prévia

Descripción

Solo-Validate es una validación de formulario basada en atributos de datos HTML5 sin dependencias que admite la validación de formularios del lado del cliente y del servidor. Las reglas de validación son totalmente personalizables a través de JavaScript. Compatible con el Framework bootstrap.

Instalar a través de gestores de paquetes

# NPM
$ npm install Just-validate

# Bower
$ bower install Just-validate

¿Cómo funciona?

Cargue la versión minimizada de la biblioteca de validación justa en el documento HTML.

<script src="js/just-validate.min.js"></script>

Agregue los atributos Data-Validate-Field = "nombre de campo" a los campos de formulario. Todos los nombres de campo:

• Correo electrónico
• Nombre
• Texto
• Contraseña
• Zip
• Teléfono
• y personalizado

<input type="Texto" data-validate-field="Nombre" Nombre="Nombre">
<input type="Correo electrónico" data-validate-field="Correo electrónico" Nombre="Correo electrónico">
...

Active la funcionalidad de validación en el formulario HTML.

new window.JustValidate('.js-form', {


// options here
});

Personalice las reglas de validación predeterminadas.

new window.JustValidate('.your-form', {


Rules: {



Correo electrónico: {





required: true,





Correo electrónico: true



},



checkbox: {





required: true



},



Nombre: {





required: true,





minLength: 3,





maxLength: 15



},



Texto: {





required: true,





maxLength: 300,





minLength: 5



},



Contraseña: {





required: true,





Contraseña: true,





minLength: 4,





maxLength: 8



},



Zip: {





required: true,





Zip: true



},



Teléfono: {





Teléfono: true



}

}
});

Personalice los mensajes de error predeterminados:

new window.JustValidate('.your-form', {


Messages: {



required: 'The field is required',



Correo electrónico: 'Please, type a valid Correo electrónico',



maxLength: 'The field must contain a maximum of :value characters',



minLength: 'The field must contain a minimum of :value characters',



Contraseña: 'Password is not valid',



remote: 'Email already exists'


},
});

Controle el envío del formulario a través de AJAX.

new window.JustValidate('.your-form', {


submitHandler: function (form, values, ajax) {



ajax({




url: 'YOUR URL',




method: 'POST',




data: values,




async: true,




callback: function (response) {





alert('AJAX submit successful! \nResponse from server:' + response)




},




error: function (response) {





alert('AJAX submit error! \nResponse from server:' + response)




}



});


},
});

Establezca el color de los mensajes de error:

new window.JustValidate('.your-form', {


colorWrong: "#B81111"
});

Si desea validar los campos de formulario en el lado del servidor.

new window.JustValidate('.your-form', {


rules: {



Correo electrónico: {




required: true,




Correo electrónico: true,




remote: {





url: 'REMOTE URL',





sendParam: 'Correo electrónico',





successAnswer: 'OK',





method: 'GET'




}



}


}
});

Registro de cambios

04/13/2019

• v1.3.1: fix(semver): test semver

12/02/2018

• v1.3.0: Added feature for check required radio buttons

09/22/2018

• v1.2.0: fix path, reNombre params