Veamos un ejemplo básico de cómo usar la librería con un formulario simple.
<form id="form">
<input type="text" id="input">
<button>Submit</button>
</form>
Ahora en Javascript.
const form=document.getElementById("form")
const input=document.getElementById("input")
Para validar este formulario se realiza de la siguiente manera.
La función formStart() sirve para iniciar el proceso de validación.
form.addEventListener("submit",(e)=>{
e.preventDefault()
Vali.formStart()
})
La función formVali() realiza la validación de un campo. Toma dos parámetros: el valor del input y un array con las validaciones deseadas.
form.addEventListener("submit",(e)=>{
e.preventDefault()
Vali.formStart()
Vali.formVali(input.value,["required"])
})
Verifica que el valor sea una cadena de texto
vali.formVali(input.value,["isString"])
Comprueba que al menos una opción de un grupo de botones de opción esté seleccionada
const radio=document.querySelectorAll(".radio")
vali.formVali(radios,["selectRadio"])
Comprueba que al menos una opción de un grupo de casillas de verificación esté seleccionada. Puedes incluir límites (mínimo y máximo) para la cantidad de casillas de verificación seleccionadas.
const checkbox=document.querySelectorAll(".checkbox")
vali.formVali(checkbox,["selectCheckBox|min|3"])
Puedes usar 'min' o 'max' que indican el minimo o maximo de casillas marcadas y las cantidades 3, 4, o 2 casillas marcadas.
O tambien simplemente dejandolo de la siguiente forma, este verificara que almenos uno este marcado
vali.formVali(checkbox,["selectCheckBox"])
Comprueba que el valor sea un booleano (verdadero o falso). También permite comprobar si el valor es igual a un booleano específico.
vali.formVali(true,["isBoolean"])
Tambien puedes verificar si esperas que sea un false o true de la siguiente forma
vali.formVali(true,["isBoolean|false"])
En ese ejemplo es habria un error, ya que se espera un false sin embargo se esta enviando un true
Comprueba que la longitud del valor sea mayor o igual a un mínimo especificado.
const select=document.getElementById("select")
vali.formVali(select.value,["lenMin|3"])
Comprueba que la longitud del valor sea menor o igual a un máximo especificado.
const select=document.getElementById("select")
vali.formVali(select.value,["lenMax|6"])
Comprueba que el valor sea una matriz. También puedes comprobar el número mínimo o máximo de elementos de la matriz.
vali.formVali([1,2,3,4,5],["isArray"])
Comprueba que el valor sea diferente de un valor especificado.
vali.formVali(select.value,["differentTo|todas"])
Comprueba que el valor sea igual a un valor especificado.
vali.formVali(select.value,["equalTo|react"])
Verifica que el valor sea una dirección de correo electrónico válida.
vali.formVali(input.value,["isEmail"])
Verifica que el valor sea una fecha válida en formato YYYY-MM-DD.
vali.formVali(input.value,["valitedDate"])
Verifica que se ha seleccionado un archivo y que pertenece a la clase File o FileList.
const file=document.getElementById("file")
vali.formVali(e.target.files[0],["uploadFile"])
vali.formVali(file.files,["uploadFile"])
Comprueba que el tamaño del archivo se encuentre dentro de los límites especificados. Permite especificar si el tamaño debe ser mínimo o máximo y la unidad de medida (KB).
const file=document.getElementById("file")
vali.formVali(file.files,["sizeFile|min|1|KB"])
//es lo mismo solo que uno esta con KB
vali.formVali(file.files,["sizeFile|min|1024"])
//o
vali.formVali(file.files,["sizeFile|max|2|KB"])
//es lo mismo solo que uno esta con KB
vali.formVali(file.files,["sizeFile|max|2048"])
Verifica que el tipo MIME del archivo sea uno de los tipos permitidos.
const file=document.getElementById("file")
vali.formVali(e.target.files[0],["typeFile|image/jpeg|image/png"])
//o
vali.formVali(file.files,["typeFile|image/jpeg|image/png"])
Comprueba que el valor no contenga ningún carácter de una lista especificada.
vali.formVali(input.value,["notUse|0-9|ñÑ"])
Comprueba que el color este en formato hexadecimal(#FFFFFF)
vali.formVali(input.value,["isColor"])
La función formError() muestra un mensaje de error si formVali() falla. Recibe dos parámetros: el nombre de la validación y el mensaje de error.
form.addEventListener("submit",(e)=>{
e.preventDefault()
Vali.formStart()
Vali.formVali(input.value,["required"])
let error=Vali.formError("required","Campo Vacio")
console.log(error)//en caso falle devuelve "Campo Vacio", si esta correcto no devuelve nada
})
La función resultError() te permite ejecutar acciones si alguna validación falla.
if(Vali.resultError()){
// si hay un fallo en las validaciones
// podrias hacer que un input cambie su borde a rojo
input.style.borderColor="red"
}else{
//en caso no falle
//muestra al input sin el borde rojo
input.style.borderColor="black"
}
La función customVali() permite crear validaciones personalizadas sin usar formVali(). Debes pasarle un nombre, una función que retorne true o false, y un valor booleano opcional.
function suma(n1,n2){
var total=n1+n2
if(total==10){
return true
}else{
return false
}
}
Vali.customVali("personalizado",suma(5,5),true)
let custom_error=Vali.formError("personalizado","Debe ser 10")
Vali.customVali("personalizado",suma(5,5),false)
let custom_error=Vali.formError("personalizado","La suma no puede ser 10")
La función formFinal() verifica si no hay errores en el formulario completo.
form.addEventListener("submit",(e)=>{
e.preventDefault()
Vali.formStart()
Vali.formVali(input.value,["required"])
let error=Vali.formError("required","Campo Vacio")
console.log(error)//en caso falle devuelve "Campo Vacio", si esta correcto no devuelve nada
if(Vali.resultError()){
//si hay un fallo en las validaciones
//podrias hacer que un input cambie su borde a rojo
input.style.borderColor="red"
}else{
//en caso no falle
//muestra al input sin el borde rojo
input.style.borderColor="black"
}
if(Vali.formFinal()){
console.log("Fomulario sin errores")
}else{
console.log("Formulario con errores")
}
})
La función globalStart() nos permite identificar y evaluar varios eventos ya sean input, change, click, submit, entre otros. Recibe dos parametros el primero es un identificador y el segundo es un array con los nombres analizar, como en el ejemplo.
Vali.globalStart("formProduct",["product","price"]);
La función globalForm() se utiliza para analizar los resultados despues del formVali(). Este recibe dos parametros el primero es el identificador que se le coloco al globalStart() y el segundo parametro se coloca el nombre de del array.
product.addEventListener("input",()=>{
Vali.formStart();
Vali.formVali(product.value,["required"]);
error_product.innerText=Vali.formError("required","Campo vacio");
Vali.globalForm("formProduct","product");
})
Ya no se necesita de formFinal() en este tipo de casos porque este no tiene ningun efecto en el globalStart()
Si utilizaramos el formFinal() solo analizaria el input text y no tomaria en cuenta al input file, para lograr que tome en cuenta al input file se utilza globalForm() , este solo necesita dos parametros, el primero es un identificador con el cual podremos ubicarlo y el segundo un nombre del array
form.addEventListener("submit",(e)=>{
e.preventDefault()
if(Vali.globalFinal("formProduct")){
result.innerText="Sin fallos"
}else{
result.innerText="Con fallos"
}
})