@serra-joan/validate-inputs

Validation Inputs JS

Objetivo

Validation Inputs JS es un script diseñado para ayudar a validar una gran cantidad de inputs HTML5. Está orientado a valores simples con una capa de personalización mínima. Todo el script esta inspirado en el sistema de validación de Codeigniter 4 Ver más

Creación de las Reglas

Para ejecutar este validador, primero debes definir las reglas necesarias. Las reglas se componen de dos secciones:

• [inp_id_1]: Id del elemento en el DOM, tanto <input> como <select>.
• label: sirve para nombrar el elemento en la lista de errores en caso de que no sea válido.
• rules: listado de las reglas que debe cumplir el elemento. El carácter "|" es el separador de las reglas.

Reglas de Validación

Regla	Descripción	Ejemplo
permit_empty	Permite que el valor sea "empty()"	permit_empty
required	El valor no debe ser "empty()"	required
required_if	Obligatorio si el objetivo no es "empty()"	required_if[input_objective_1]
required_if_not	Obligatorio si el objetivo es "empty()"	required_if_not[input_objective_1]

Reglas Adicionales

Regla	Descripción	Aplicación
email	Error si el valor no tiene una estructura de email	email
numeric	Error si el valor no es numérico	numeric
in_list	Error si el valor no está en la lista	in_list[option_1,option_2,…]
not_in_list	Error si el valor está en la lista	not_in_list[option_1,option_2,…]
unchecked	Error si el valor objetivo está seleccionado	unchecked[input_objective]
less_than	Error si el valor es igual o mayor que el deseado	less_than[100]
greater_than	Error si el valor es igual o menor que el deseado	greater_than[50]
min_length	Error si el valor contiene menos caracteres que el deseado	min_length[150]
max_length	Error si el valor contiene más caracteres que el deseado	max_length[200]

Ejecución de Validación

Para ejecutar la validación, debes llamar a la función validateRun(rules) y pasarle las normas mencionadas anteriormente.

Función de Retorno

Esta función devuelve un objeto con los siguientes parámetros:

• valid: Booleano que indica si la validación es correcta o no.
• msg: Cadena de texto en formato lista HTML (<ul><li>label -> error<li></ul>) con todos los errores. (Solo si valid === false)

Cada input que no pase la validación recibirá la clase is-invalid, la cual se elimina en cada validación. Se puede personalizar con el segundo parámetro al llamar a validateRun(), ya que si no tienes Bootstrap en tu proyecto esta clase no hará nada.

Ejemplo de Uso

const rules = {
    ["inp_username"]: {label: "Username", rules: "required|min_length[5]"},
    ["inp_email"]: {label: "Email", rules: "required|email"},
    ["inp_age"]: {label: "Age", rules: "required|numeric"}
};

const result = validateRun(rules);

if (!result.valid) {
    console.log(result.msg); // Muestra la lista de errores
}