Validar Datos en HTML Y CSS3

CETPRO LA INMACULADA
COMPUTACIN II
PRCTICA N 18
VALIDAR DATOS EN HTML 5
La validacin de los campos de un formulario es una tarea de programacin necesaria, aunque muchas
veces es un proceso molesto. Para ejecutar la validacin por parte del cliente siempre debemos recurrir
a scripts, habitualmente en lenguaje JavaScript o emplear alguna librera para verificar que las entradas
son del tipo correcto y que estn completas con datos, antes de que el formulario sea enviado. En
HTML5 los nuevos atributos de las entradas como required y pattern usados en combinacin con
selectores de CSS, facilitan la programacin y mejora de la interfaz del usuario.
a) Validacin: atributo required
Si el atributo required est presente, entonces el campo debe contener necesariamente un valor al
ser enviado. Por ejemplo:
<input type="email" id="email_addr" name="direccion-correo" required />
b) Validacin: atributo pattern
El atributo pattern especifica una expresin regular usada para validar los campos de entrada. Por
ejemplo, si se supone que la entrada ha de tener el siguiente formato: 3 letras en maysculas
seguidas de 4 nmeros. El uso de required y pattern asegura que la entrada debe ser rellenada
siguiendo la expresin regular. Al situarse el usuario sobre la entrada, el mensaje en el
atributo title se muestra.
<input type="text" id="referencia" name="referencia" required pattern="[A-Z]{3}[0-9]{4}"

title="El formato debe coincidir con 3 letras maysculas y 4 nmeros."/>
Utilizando el ejemplo anterior se puede hacer que la entrada aparezca en color rojo si el valor ingresado
no cumple con la expresin regular. Para hacerlo hay que combinar CSS:
invalid {
border: 2px solid #ff0000;
}
c) Validacin: atributo formnovalidate
El atributo formnovalidate puede ser aplicado en input y button. Si est presente, la validacin
queda sin efecto. En el siguiente ejemplo tenemos dos botones, uno donde se realiza la validacin
y otro en el que no.
<input type="text" id="referencia" name="referencia" required pattern="[A-Z]{3}[0-9]{4}"

title="El nmero de referencia consta de 3 letras maysculas y 4 dgitos."/>
<input type="submit" formnovalidate value="Save">
<input type="submit" value="Submit">
I. EJEMPLO DE FORMULARIO VALIDADO EN HTML

El siguiente cdigo muestra el ejemplo de un formulario de datos, que son habituales en una compra
a travs de internet. El estilo del formulario se da en cdigo CSS, incorporado en el cdigo HTML5.
<!DOCTYPE html>
<html lang=es>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Validar formularios con HTML5 y CSS3</title>
<style type="text/css">
form#pago {
margin:auto;
background: Green;
color: white;
font-size: 12px;
Prof. Luis David Sana Gutirrez Pgina 51

COMPUTACIN II
padding: 30px;
width: 350px;
border:solid 10px LightSteelBlue;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
form#pago fieldset {
border: none;
}
form#pago input{
font-size:12px;
background: yellow;
border:solid 1px Green;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
float: right;
margin-right: 15px;
width: 200px;
}
form#pago ol li {
line-height: 25px;
list-style: none;
}
form#pago [required]{
border:solid 1px red;
}
input:required {
outline: 1px solid red;
}
</style>
</head>
<body>
<form id="pago">
<fieldset>
<legend>Datos del comprador</legend>
<ol>
<li>
<label for="nombre">Nombre</label>
<input id="nombre" name="nombre" type="text" placeholder="Escribe tu nombre completo" required
autofocus>
</li>
<li>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="ejemplo@um.es" required>
</li>
<li>
<label for="telefono">Telfono</label>
<input id="telefono" name="telefono" type="tel" placeholder="Ej. +34668899999" required>
</li>
<li>
<label for="pais">Pas</label>
<input id="pais" name="pais" type="text" required>
</li>
</ol>
COMPUTACIN II
</fieldset>
<fieldset>
<legend>Datos de tarjeta de crdito o dbito</legend>
<ol>
<li>
<label for="numtarjeta">Nmero</label>
<input id="numtarjeta" name="numtarjeta" type="number" placeholder="Ej. 5555-4444-3333-2222"
required>
</li>
<li>
<label for="nomtarjeta">Nombre</label>
<input id="nomtarjeta" name="nomtarjeta" type="text" placeholder="Nombre que figura en la
tarjeta" required>
</li>
</ol>
</fieldset>
-------------------------------------------------
<fieldset>
<button type="submit">Confirmar pedido</button>
</fieldset>
</form>
II. EJEMPLO DE FORMULARIO VALIDADO EN JAVA SCRIPT

En el siguiente ejemplo hay un formulario que contiene tres campos de texto para escribir el nombre de
tres marcas de coches, el formulario no se puede enviar si no se han escrito los tres nombres:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<title>Validacin de un formulario con JavaScript</title>
<script type="text/javascript">
function valida(f) {
var ok = true;
var msg = "Debes escribir contenido en los campos:\n";
if(f.elements[0].value == "")
{
msg += "- Marca 1\n";
ok = false;
}
if(f.elements["marca2"].value == "")
{
ok = false;
}
if(f.marca3.value == "")
{
ok = false;
}
if(ok == false)
alert(msg);
return ok;
}
</script>
</head>
<body lang="es">
Introduce tus marcas de coches favoritas<br>
<form id="miFormulario" action="" method="get" onsubmit="return valida(this)">
COMPUTACIN II
<p>
Marca 1: <input type="text" id="marca1" />
<br />
<br />
<br />
<input type="submit" value="Enviar" />
<input type="reset" value="Borrar" />
</p>
</form>
</body>
</html>
Cuando se llama a la funcin valida() desde el evento onsubmit se le pasa como valor del
parmetro this, que es un objeto que representa al formulario desde el que se invoca al mtodo. En
este ejemplo, se ha empleado el atributo id en vez del atributo name para identificar cada elemento, ya
que XHTML 1.0 no permite el empleo del atributo name en la etiqueta<form>.
La funcin valida() debe devolver true o false segn la validacin haya sido correcta o haya fallado.
Este valor debe ser devuelto al navegador: el valor true significa "contina y enva el formulario al
servidor", mientras que false significa "cancelar y no enviar el formulario". Por ello, en el cdigo se
debe escribir onsubmit="return valida(this)" para reenviar el valor devuelto al navegador.
III. EJEMPLO DE FORMULARIO CON HTML+ JAVA SCRIPT + CSS EXTERNOS
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="description" content="Este es un formulario simple validado en el Font-End con
JavaScript">
<meta name="keywords" content="Formulario, validacion con JavaScript, etc.">
<title>Formulario</title>
<link rel="stylesheet" href="css/estilo.css" />
</head>
<body>
<section id="contenedor">
<h1>Validación de un formulario con JS en el Front-End</h1>

<form action="enviar.php" method="post" id="formulario" name="formulario">

<fieldset>
<legend>Tus datos:</legend>
<label for="nombres">Nombres y Apellidos:</label><br/>
<input type="text" name="nombres" id="nombres"/><br/>
<label for="direccion">Dirección:</label><br/>
<input type="text" name="direccion" id="direccion"/><br/>
<label for="pais">País:</label><br/>
<input type="text" name="pais" id="pais"/><br/>
<label for="email">Email:</label><br/>
<input type="text" name="email" id="email"/><br/>
<label for="web-site">Pagina Web/Blogger:</label><br/>

<input type="text" name="web-site" id="web-site"/><br/>

COMPUTACIN II
<label for="telefono">Teléfono/Celular:</label><br/>
<input type="text" name="telefono" id="telefono"/><br/>
</fieldset>
<br/>
<label for="comentario">Escribe tu comentario:</label><br/>
<textarea name="comentario" id="comentario" cols="70" rows="10" maxlength="1000"
onkeypress="calcular()" onkeyup="calcular()"></textarea><br/>
<p>Le quedan <span id="contador-char">1000</span> de 1000 caracteres.</p>
<br/> <br />
<button type="button" name="enviar" id="enviar"
class="canbio">Enviar</button> <button type="button" id="limpiar"
name="limpiar" class="canbio">Limpiar Formulario</button>
</form>
</section>
<footer>
© Luis David Sana Gutirrez
<p>Correo electronico: prof.luis.2012@gmail.com</p>
<address>
<p>Dirección: Santa Mnica/ Mariscal Cceres/Caman
</address>
</footer>

<script async type="text/javascript" src="js/script.js"></script>
</body>
</html>
ESTILO EN CSS (estilo.css)

*{
margin:0;padding:0;
}
body{
background:#C0C0C0;
}
h1{
font-size: 1.5em;
text-align: center;
color:#310430;
}
#contenedor{
background:transparent;
margin:0 auto;
width:96%;
}
#contenedor form fieldset{
border: 2px solid #FA5E1B;
padding:5px;
font-size:20px;
}
#contenedor form{
padding:10px;
margin:10px 30px;
border:thin solid #E9E9E9;
border-radius:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
-o-border-radius:20px;
-ms-border-radius:20px;
}
#contenedor form label{
color:#004040;
font-size:18px;
}
#contenedor form label:hover{
COMPUTACIN II
color:#171717;
cursor:pointer;
}
#contenedor form input[type="text"]{
width:400px;
height:35px;
padding-left:5px;
font-family:Helvetica;
font-size:16px;
}
#contenedor form textarea{
resize:none;
padding:5px;
}
#contenedor form input[type="text"], textarea{
background: #94CFA3;
}
#contenedor form input[type="text"]:focus, #contenedor form textarea:focus{

background: #83CA8E;
outline-color: #008A45;
}
#contenedor form input[type="text"]:active, #contenedor form textarea:active{
background: #6CAEF7;
outline-color: #008A45;
}
#contenedor form .canbio{
transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
}
#contenedor form button{
background:#FF8000;
border-radius:5px;
color:white;
padding:10px 20px;
border:2px solid white;
}
#contenedor form button:hover
{
color:black;
cursor:pointer;
}
footer{
background: #272727;
text-align: center;
padding: 20px 2%;
}
JAVA SCRIPT (script.js)
function validarFormulario(){
var verificar=true;
var expRegNombres =/^[A-Za-z]{1,}([\s][A-Za-z]{1,})+$/;
var expRegPais = /^[a-z\s]*$/i;
var expRegEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/;
var expRegUrl= /^(http|https|ftp)+\:+\/\/+(www\.|)+[a-z0-9\-\.]+([a-z\.]|)+\.[a-z]{2,4}$/i;
var expRegTelefono=/^([0-9]\s*)*$/;
var formulario = document.getElementById("formulario");
var nombres = document.getElementById("nombres");
var direccion = document.getElementById("direccion");
COMPUTACIN II
var pais = document.getElementById("pais");
var email = document.getElementById("email");
var webSite= document.getElementById("web-site");
var telefono = document.getElementById("telefono");
var comentario = document.getElementById("comentario");
if(!nombres.value){
alert("Escriba sus nombres por favor.");
nombres.focus();
verificar=false;
return false;
}
else if(nombres.value.split(" ").length < 2){
alert("Esciba sus nombres completos por favor.");
nombres.focus();
verificar=false;
return false;
}
else if(!expRegNombres.exec(nombres.value)){
alert("Este campo admite letras de la a-zA-Z, y no admite espacios en blanco
al final.");
nombres.focus();
verificar=false;
return false;
}
else if(!direccion.value){
alert("Escriba su direcci\u00F3n por favor.");
direccion.focus();
verificar=false;
return false;
}
else if(!pais.value){
alert("Escriba el nombre del pa\u00EDs que nos visita por favor.");
pais.focus();
verificar=false;
return false;
}
else if(!expRegPais.exec(pais.value)){
alert("Escriba de que pa\u00EDs nos visita sin n\u00FAmeros ni caracteres especiales como [+
* , . - _ { } ...].");
pais.focus();
verificar=false;
return false;
}
else if(!email.value){
alert("Escriba su email por favor.");
email.focus();
verificar=false;
return false;
}
else if(!expRegEmail.exec(email.value)){
alert("Escriba un email valido por favor.");
email.focus();
verificar=false;
return false;
}
else if((webSite.value!="")&& !expRegUrl.exec(webSite.value)){
alert("Escriba un formato de sitio web valido por favor.");
webSite.focus();
verificar=false;
return false;
}
else if(!telefono.value){
alert("Escriba un n\u00famero de tel\u00E9fono por favor.");
COMPUTACIN II
telefono.focus();
verificar=false;
return false;
}
else if(!expRegTelefono.exec(telefono.value)){
alert("el campo tel\u00E9fono admite n\u00FAmeros y espacios en blanco.");
telefono.focus();
verificar=false;
return false;
}
else if(!comentario.value){
alert("el campo comentarios es requerido");
comentario.focus();
verificar=false;
return false;
}
else if(comentario.value.length > 1000){
alert("El campo comentarios no puede tener mas de 1000 caracteres.");
comentario.focus();
verificar=false;
return false;
}
if(verificar==true){
document.formulario.submit();
}
}
function limpiarFormulario(){
document.getElementById("formulario").reset();
}
function calcular(){
var contadorChar= document.getElementById("contador-char").innerHTML=1000
-document.formulario.comentario.value.length;
}
window.onload=function(){
var botonLimpiar=document.getElementById("limpiar");
botonLimpiar.onclick=limpiarFormulario;
var botonEnviar=document.getElementById("enviar");
botonEnviar.onclick=validarFormulario;
}

Validar Datos en HTML Y CSS3

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Validar Datos en HTML Y CSS3

Diunggah oleh

Hak Cipta:

Format Tersedia

CETPRO LA INMACULADA

<input type="email" id="email_addr" name="direccion-correo" required />

b) Validacin: atributo pattern

<input type="text" id="referencia" name="referencia" required pattern="[A-Z]{3}[0-9]{4}"

<input type="text" id="referencia" name="referencia" required pattern="[A-Z]{3}[0-9]{4}"

<input type="submit" formnovalidate value="Save">

<input type="submit" value="Submit">

I. EJEMPLO DE FORMULARIO VALIDADO EN HTML

Prof. Luis David Sana Gutirrez Pgina 51

II. EJEMPLO DE FORMULARIO VALIDADO EN JAVA SCRIPT

III. EJEMPLO DE FORMULARIO CON HTML+ JAVA SCRIPT + CSS EXTERNOS

<form action="enviar.php" method="post" id="formulario" name="formulario">

<label for="web-site">Pagina Web/Blogger:</label><br/>

Prof. Luis David Sana Gutirrez Pgina 54

ESTILO EN CSS (estilo.css)

#contenedor form input[type="text"]:focus, #contenedor form textarea:focus{

JAVA SCRIPT (script.js)

Prof. Luis David Sana Gutirrez Pgina 58

Anda mungkin juga menyukai