Semantic UI.

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

 Debe asociarse al formulario la siguiente estructura de datos:

{
fields : {
propiedad_1 : {
identifier : identificador_campo
rules : [ . . .]
},
propiedad_2 : { . . . }
. . .
}
}
 Los campos son ‘matcheados’ por el primer atributo encontrado:
propiedad_1 >> (id, name, data-validate) del control de formulario
Si se indica la propiedad “identifier”, se utilizará su valor en lugar del
nombre de la propiedad.
Validación. Asociación de Reglas y Campos

 Pueden indicarse una o más reglas

rules : [
{ type : {tipo_regla}, prompt : “mensaje_error” }
. . .
]

 Ejemplos de tipos de reglas

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”}

 El valor del parámetro puede incluirse en el mensaje de error

 {type: “minLength[ 6]”, prompt: “Ingresar al menos {ruleValue} caracteres”}

 Propiedades string o variables javascript

 Uso de la propiedad ‘value’
 {type: “regExp”, value: /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/i }
Validación. Paso de Parámetros a Reglas
 Ejemplo: color: {
identifier: 'color',
rules: [{
type: 'regExp',
value: /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/i,
prompt : "El formato correcto es: rgb(ddd, ddd, ddd)"
}]
},
nombre: {
identifier : "nombre",
rules: [{
type : "minLength[4]",
prompt : "El nombre debe tener por lo menos {ruleValue} caracteres"
}]
}
Validación. Paso de Parámetros a Reglas
 Ejemplo:
Validación. Personalización de Mensajes
 Cada tipo de validación tiene un mensaje por default
 $fn.form.settings.prompt, permite establecer los mensajes deseados

 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

Reglas de tipo Disparador

Empty
empty Si el campo está vacio
checked Si un checkbox no esta seleccionado
Validación. Reglas de Validación
Reglas de Tipo de Disparador
Contenido
email Si no es una dirección de correo válida
url Si no es una URL válida
integer Si no es un entero (integer), o no se encuentra dentro
de un rango (integer[1..10])
decimal Si no es un número decimal
number Si no es un número
Si no cumple una expresión regular
regExp regExp[/^[a-z0-9_-]{3,16}$/gi]]
regExp[/^[a-z0-9_-]{3,16}$/]]
Validación. Reglas de Validación
Reglas de Tipo de
Disparador
Pago
creditCard Si no es una tarjeta de crédito válida
Si no es una tarjeta valida dentro de un listado de
creditCard[tipos] tipos
creditCard[ visa, mastercard, unionpay]

Reglas de Longitud Disparador

minLength Si la longitud del campo es menor al valor indicado
Si la longitud del campo no exactamente el valor
exactLength
indicado

maxLength Si la longitud del campo es mayor al valor indicado

Validación. Reglas de Validación
Reglas de Contenido Disparador
Específico
contains Si contiene la cadena indicada (NS)
containsExactly Si contiene exactamente la cadena indicada
doesntContains Si no contiene la cadena indicada (NS)
doesntContainsExactly Si no contiene exactamente la cadena indicada
is Si es un valor
(NS)
isExactly Si es exactamente un valor
not Si no es un valor (NS)
notExactly Si no es exactamente un valor

(NS) = No sensible a mayúsculas / minúsculas

Validación. Reglas de Validación
Reglas de Match Disparador
Si un campo no hace match con otro campo
match
match[password_1]
Si un campo no es distinto de otro campo
different
different[eleccion]

Reglas de Count Disparador

Si un campo de selección múltiple no tiene un mínimo
minCount
de valores
Si un campo de selección múltiple no tiene
exactCount
exactamente un número de valores
Si un campo de selección múltiple tiene más de un
maxCount
máximo de valores
Validación. Reglas Personalizadas
 Es posible agregar tus propias reglas de validación
 Las reglas son ejecutadas de forma síncrona (deben evitarse procesos largos)

 Ejemplo:
jQuery.fn.form.settings.rules.mayorQue = function(valor, valorRegla) {

return parseInt( valor, 10) > parseInt( valorRegla, 10);

};

. . .

{ type : “mayorQue[18]”, prompt : “No eres mayor de edad, no puedes acceder” }

. . .
Validación. Reglas Personalizadas
 Ejemplo:
Validación. Eventos
 Los siguientes eventos son relacionados con los componentes del formulario

 Un campo pierde el foco (blur) al presionar la tecla ESCAPE

 El formulario se submite al presionar la tecla ENTER en cualquiera de sus campos
 El evento submit se genera al dar click en cualquier elemento del formulario que
tenga la clase ‘submit’
 El evento reset se genera al dar click en cualquier elemento del formulario que
tenga la clase ‘reset’
 El evento clear se genera al dar click en cualquier elemento del formulario que
tenga la clase ‘clear’
Manipulación de Formulario
Manipulación. Reset / Clear de Campos
 Reset
 Devuelve todos los campos a sus valores originales (default value)
 cache de formulario/ inicialización del formulario al cargar la pagina
 Invocación:
 Programática: jQuery( “idFormulario”).form( ‘reset’);
 Interacción de Usuario: click en cualquier elemento del formulario que tenga la clase
‘reset’.
 Clear
 Limpia todos los campos, uso de placeholders.
 Invocación:
 Programática: jQuery( “idFormulario”).form( ‘clear’);
 Interacción de Usuario: Clic en cualquier elemento del formulario que tenga la clase
‘clear’.
Manipulación. Escritura de Valores
 Es posible establecer el valor de un elemento del formulario
 jQuery( ‘idFormulario’).form( ‘set value’, ‘name’, ‘Marco Antonio’);

 Es posible establecer el valor de varios elementos del formulario

 jQuery( ‘idFormulario’).form( ‘set values’, {‘name’, ‘Marco Antonio’, ‘username’ :
‘g2marco’, . . .});
Manipulación. Obtención de Valores
 Es posible obtener el valor de un elemento del formulario
 var nombre = jQuery( ‘idFormulario’).form( ‘get value’, ‘name’);

 Es posible obtener el valor de varios elementos del formulario

 var valores =jQuery( ‘idFormulario’).form( ‘get values’, [‘name’, ‘skills’, ‘terms’]);

 Es posible obtener el valor de todos los elementos del formulario

 var record = jQuery( ‘idFormulario’).form( ‘get values’);
 Se utilizará el atributo ‘name’ de cada elemento
Manipulación

Ejemplo:
Semantic UI

¿Preguntas?

Gracias por su atención!!!