Validacin de

Formularios
Ramiro Estigarribia Canese
Introduccin
La validacin de formularios del lado del cliente ha
sido un problema que siempre se ha solucionado con
la utilizacin de Javascript, ya sea con cdigo propio o
de terceros. (de pago)

Esto es debido a que en el pasado era impensable
tener una solucin con HTML puro, pero con la
llegada del conjunto de especificaciones y tecnologas
que componen el actual HTML5, ahora esto es
posible.
Introduccin
Debemos tener en cuenta la desventaja de que
todava no es soportado por algunos navegadores.

Sin embargo es importante tenerlo presente y
utilizarlo, ya que brinda importantes beneficios al
desarrollo.


Motivos para validar
1. Garantizar la integridad de los datos:
Es importante almacenar informacin correcta en la
base de datos, si se pide una edad deben ser
nmeros, si se pide un nombre deben ser letras del
alfabeto.

2. Evitar las inyecciones sql:
Utilizan formularios para construir una consulta SQL
maliciosa.


El atributo required
Al incluir el atributo required dentro de un elemento
<input>, automticamente se hace obligatorio su
llenado y al ser un atributo tipo booleano, solo se
requiere su presencia sin ms.

<input type="text" name="nombre" required/>


El atributo required
En el momento en que se encuentra un error de
validacin se ejecuta la accin por defecto del
navegador: aparece un globo emergente (tooltip)
conteniendo un texto de advertencia.

Aadiendo el atributo title en la etiqueta <input>, se
puede extender la informacin mostrada.

<input title="Se necesita un nombre"
type="text" name="nombre" required/>


El atributo required
<input title="Se necesita un nombre"
type="text" name="nombre" required/>

El atributo pattern y los
tipos de <input>
Con se mencion anteriormente, con required solo se
necesita de cualquier valor en el elemento <input>
para ser vlido, pero utilizando el atributo pattern en
conjunto, se logra que se verifique no solo la
presencia de un valor, sino que este valor debe
contener un formato, una longitud o un tipo de dato
especfico.

Esto ltimo se logra definiendo un patrn con
expresiones regulares.
El atributo pattern y los
tipos de <input>
<form action=pais.php>
Country code:
<input type=text name=country_code pattern="[A-Za-z]{3}"
title="Three letter country code"><input
type="submit"></form>




El atributo pattern y los
tipos de <input>
El potencial del atributo pattern recae en ser ms
especficos en el tipo de formato y longitud que se
requiere.


Ms informacin:
http://www.w3schools.com/tags/att_input_pattern.asp

La clase:
invalid de CSS3
La clase: invalid representa cualquier campo invlido
que sea resultado de una validacin (valga la
redundancia).
Lo opuesto ocurre con su contraparte: valid.

Esto facilita que si un campo contiene un valor invlido
pueda adoptar una apariencia acorde, de esta forma
ayudando al usuario a identificar los campos que
necesitan ser verificados.


La pseudo clase:
invalid de CSS3
input:invalid { border: 1px solid red;
} /* Estilo por defecto */ input:valid { border: 1px solid
green;
}

Un aspecto que es importante resaltar, es que por
defecto todos los campos son vlidos (como es de
esperarse), pero si un campo es requerido, entonces
ocurre lo contrario, este por defecto ser invlido.

La pseudo clase:
invalid de CSS3
<link rel=StyleSheet href=estilo.css><form action=test>
Nombre<input type=text name=nombre required><br>
Codigo de pais:
<input type=text name=codigo pattern="[A-Za-z]{3}"
title="3 Letras"><input type="submit"></form>

Detectar Navegador
del visitante
El objetivo es indicar al usuario, que su
navegador no soporta las caractersticas del sitio:

<?phpif (strpos($_SERVER['HTTP_USER_AGENT'],'MSIE') !==
false)
{header ("Location: sistema.php");
}else
{print "Internet Explorer no est soportado."exit (0);
}
?>

Validacin de formularios
con en el servidor con Php
Validar en el servidor aporta ms seguridad, ya
que protege a la base de datos.

Se evita que un usuario malintencionado (hacker),
pueda crear una pgina falsa para ingresar datos
malignos.

Validar si utiliza ciertas
correctas (hasta 50).
<?php$permitidos = '/^[A-Z
]{1,50}$/i';if
(preg_match($permitidos,$_REQUEST['Nombre']))
{ print Correcto;
} else
{ print Error: Letra no permitida;
}
?>

Validar si est en blanco.
<?php
if(empty($_REQUEST['Nombre']))
{ print Error: Datos Vacos;
}else
{
print Correcto;
}
?>
Validar campo numrico
<?php if(ctype_digit($_REQUEST[Edad]))
{ print "Si es un nmero";
} else
{ print "No es un nmero";
}
?>

Preguntas
1. Por qu es importante validar los datos? Cite un motivo.
2. Cul es la desventaja de validar con HTML5, hoy da?
3. Para qu sirve el atributo required?
4. Crear un formulario con 3 datos obligatorios: nombre,
edad, email.
5. Para qu sirve el atributo pattern?
6. Para qu sirve la clase:invalid de CSS3?
7. Qu aporta la validacin de formularios en el servidor?
8. Crear un formulario con 3 datos: nombre, edad, nota.
Luego escribir un programa, que controle que la edad sea
un nmero.