Cree validaciónes en tiempo record, probando las diferentes características que trae ValidateFormJS.
Puede establecer longitud en un campo, validar si esta vacio, incluso ¡establecer que tipo de caracteres ingresar!.
Documentación
<h4>Ingresar Datos</h4>
<form id="frmUno">
<div class="form-group">
<label for="usuario">Usuario Correcto</label>
<input type="text" class="form-control" id="usuarioC" placeholder="Ingrese el Usuario">
</div>
<div class="form-group">
<label for="usuario">Usuario Error</label>
<input type="text" class="form-control" id="usuarioE" placeholder="Ingrese el Usuario">
</div>
<div class="form-group">
<label for="contrasena">Contraseña</label>
<input type="password" class="form-control" id="contrasena" placeholder="Ingrese la contraseña">
</div>
<div class="form-group">
<label for="contrasenaRep">Repita la Contraseña</label>
<input type="password" class="form-control" id="contrasenaRep" placeholder="Ingrese la contraseña">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
const vf = new ValidateForm("frmUno",[
{
tipo: "texto",
campo: "usuarioC",
vacio:true
},
{
tipo: "texto",
campo: "usuarioE",
vacio:true
},
{
tipo: "texto",
campo: "contrasena",
vacio: true,
},
{
tipo: "texto",
campo: "contrasenaRep",
vacio: true,
comparar:{
campoDos:"contrasena"
}
}
]);
vf.ValidarIniciar();
document.getElementById("frmUno").addEventListener("submit",function(){
if(vf.GetResultado()){
alert("enviando");
}else{
alert("error");
}
});
Antes comenzar a usar las validaciones, es necesario usar el atributo id en las cajas de texto y en el Formulario (el nombre que le establezcas puede ser a su elección).
<form id="frm">
<div class="form-group">
<label for="campo">Campo</label>
<input type="text" class="form-control" id="campo" placeholder="Ingrese el Campo">
</div>
...
</form>
Para iniciar las Validaciones deberá
const vf = new ValidateForm("frm",[
...
]);
vf.ValidarIniciar();
Cuando las validaciones son correctas, el usuario puede manejar el evento que desea realizar, solo con la funcion GetResultado(). Ejemplo:
document.getElementById("frmUno").addEventListener("submit",function(){
if(vf.GetResultado()){
...Evento Correcto
}else{
..Evento Incorrecto
}
});
Nombre | Tipo | Valor(es) | Descripción |
---|---|---|---|
tipo | string | [texto,textoEspecial, seleccion,correo] | Tipo de validacion que se realizara, enfocado a la manera de como debe ingresarse el dato. |
campo | string | ... | Identificador de los campos. |
vacio | boolean | [true,false] | Establezca si el campo sera vacio o no. |
longitud | objeto | {} |
Establezca si el campo tendra una longitud de caracteres. Puede especificar el maxima de caracteres y el minimo de caracteres.
Especifique si necesita que la longitud sea exacta. (El valor de min debe ser 0).
|
comparar | objeto | {} |
Permite ingresar otro campo para realizar una comparación, el texto debe establecerse en campoDos.
|
especial | objeto | {} |
Para usar esta opción es necesario que se establesca tipo:"textoEspecial". Las opciones a ingresar son las siguientes: Para que en el campo solo se puede ingresar números.
Para que en el campo solo se puede ingresar letras.
Para que en el campo solo se puede ingresar letras.
Para que en el campo solo se puede ingresar numero decimal.
|
Estructura par iniciar la validación.
[variable] = new ValidateForm([identificador del Formulario(string)],[
array(uso de las ociones, en objetos)
]);
[variable].ValidarIniciar();
La estructura puede varias depende de el uso de las opciones, como se muestra a continuación.
{
tipo: "texto",
campo: "usuario",
vacio: true,
longitud:{
max: 30,
min: 6
}
},{
tipo:"texto",
campo:"contrasena",
vacio:true,
longitud:{
max:30,
min:2
},
},
{
tipo: "texto",
campo:"contrasenaRep",
vacio: true,
longitud:{
max:30,
min:2
},
comparar:{
campoDos: "contrasena"
}
},
{
tipo:"textoEspecial",
campo:"soloNumero",
vacio:true,
especial:{
tipoEspecial:"numero"
},
longitud:{
max:4,
min:0,
exacto: true
}
},{
tipo: "seleccion",
campo: "tipoUsuario",
vacio:true
}
Constructor/Funcion | Return | Descripcion |
---|---|---|
ValidateForm() | ... | Crea una nueva instancia de la clase ValidateForm, recibe como primer parametro el id del formulario, y como segundo parametro una estructura de validación. |
ValidarIniciar() | ... | Inicializa las Validacion con el uso de los eventos de javascript (input,change). |
GetResultado() | [true,false] | Obtiene el resultado de las validaciones, es obligatorio si el usuario quiere enviar un formulario. |