Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Validación
de Formulario
Meve Soluciones
Marco Antonio García García.
Validación de Formulario
Validación
Asociación de Reglas y Campos
Paso de Parámetros a Reglas
Personalización de Mensajes
Reglas de Validación
Reglas Personalizadas
Eventos
Manipulación
Reset/Clear de campos
Escritura de valores
Obtención de Valores
Validación de Formulario
Validación. Asociación de Reglas y Campos
Tipo Descripción
empty El campo debe tener un valor
minCount[ n] El campo debe tener por lo menos ‘n’ elementos
minLength[ n] El campo debe tener una longitud mínima de ‘n’
caracteres
checked El campo debe estar ‘seleccionado’
Validación. Asociación de Reglas y Campos
Ejemplo: name: {
identifier: 'name',
rules: [ { type : 'empty', prompt : 'Please enter your name'}]
},
skills: {
identifier: 'skills',
rules: [ { type : 'minCount[2]', prompt : 'Please select at least two skills'} ]
},
gender: {
identifier: 'gender',
rules: [ { type : 'empty', prompt : 'Please select a gender'}]
},
username: {
identifier: 'username',
rules: [ { type : 'empty', prompt : 'Please enter a username'} ]
},
password: {
identifier: 'password',
rules: [
{ type : 'empty', prompt : 'Please enter a password'},
{ type : 'minLength[6]', prompt : 'Your password must be at least {ruleValue}
characters'}]
},
terms: {
identifier: 'terms',
rules: [ { type : 'checked', prompt : 'You must agree to the terms and conditions'}]
}
Validación. Asociación de Reglas y Campos
Ejemplo:
Validación. Paso de Parámetros a Reglas
Propiedades enteras
Uso de brakets en el tipo de validación
{type: “minCount[ 2]”, prompt: “Seleccionar al menos dos habilidades”}
Cada regla puede incluir una propiedad ‘prompt’ para definir el template
de mensaje de error deseado (campo – regla de validación). Las siguiente
propiedades pueden incluirse en el template.
Propiedad Descripción
{name} Valor de la etiqueta del campo, o placeholder
{identifier} Identificador del campo
{value} Valor actual del campo
{ruleValue} El valor pasado a la regla
Validación. Personalización de Mensajes
Ejemplo: primer_campo: {
rules: [ {
type : 'empty'
}]
},
empresa: {
rules: [{
type : 'isExactly',
value : "Meve",
prompt : 'La {name} que ingresaste es "{value}", estas
un poquito equivocado, tu trabajas en {ruleValue}'
}]
}
Validación. Personalización de Mensajes
Ejemplo:
Validación. Reglas de Validación
Las reglas de validación se encuentran en:
$.fn.form.setings.rules
Reglas personalizadas deben incluirse en esta misma instancia
Ejemplo:
jQuery.fn.form.settings.rules.mayorQue = function(valor, valorRegla) {
};
. . .
. . .
Validación. Reglas Personalizadas
Ejemplo:
Validación. Eventos
Los siguientes eventos son relacionados con los componentes del formulario
Ejemplo:
Semantic UI
¿Preguntas?