FORMULARIS

En aquesta pràctica tractarem de la validació de les dades introduïdes per l'usuari visitant de la nostra pàgina.

Hi ha ocasions que l'usuari ha d'introduir informació sol·licitada per la pàgina, per exemple dades d'un formulari que posteriorment s'ha d'enviar, valors numèrics per processar en un programa de càlculs, valors textuals acotats entre poques opcions de resposta a algunes preguntes. etc.

No podem refiar-nos que la informació introduïda per l'usuari estigui d'acord amb el format de les dades esperades. Introduir un text quan s'espera un número, una adreça de correu sense el símbol @, etc. solen ser errors habituals.

Per tant, el programa JavaScript ha de verificar que els valors introduïts siguin coherents, és a dir, ha de validar l'entrada d'informació, i si no és correcta, advertir l'usuari del seu error.

La manera de verificar si la informació és correcta es fa analitzant les dades introduïdes mitjançant comparacions amb els possibles valors correctes, o bé, comparant amb expressions regulars.
 

Ejemplo de Formulario.

Darse de alta en un portal, inscripción para usuarios, etc.

 

Introduzca sus apellidos(*)

Introduzca su nombre(*)
Sexo(*) VaronHembra
  

Introduzca su nick(*)

Introduzca su e-mail(*)

Introduzca el password(*)

Verifique el password(*)

Introduzca el codigo postal(*)

Introduzca su ocupacion

Introduzca su localidad

Introduzca sus aficiones

Introduzca su direccion de msn

Introduzca su foto

Introduzca un comentario
 

Los campos con un * se tienen que rellenar obligatoriamente

<html>
<head>
<title>Formulario</title>
<script language="JavaScript">
<!--

function formtest() {
var cognoms=document.f1.cognoms.value
var nom=document.f1.nom.value
var nick=document.f1.nick.value
var email=document.f1.email.value
var pass1=document.f1.pass1.value
var pass2=document.f1.pass2.value
var cp=document.f1.cp.value
if (nom=="" || cognoms=="" || nick=="" || email=="" || pass1=="" || pass2=="") {
alert ("Tiene que introducir todos los datos")
}
if (nom!="" && cognoms!="" && numclient!="" && email!="" && pass1!="" && pass2!="" && cp!=""){
alert("Has introducido correctamente los datos obligatorios")
}
}

function comprovar(){
var ver=1
var pass1=document.f1.pass1.value
var pass2=document.f1.pass2.value
var cp=document.f1.cp.value
if (pass1 != pass2){
alert ('La verificacion del password es incorrecta, asegurese de haver introducido el password correcto')
ver=0
}
if (cp.length > 5){
alert ('El codigo postal es demasiado largo')
ver=0
}
if (cp.length < 5){
alert ('El codigo postal es demasiado corto')
ver=0
}
if (ver==1){
alert ('Datos correctos')
}
}
//-->
</script>
</head>

<body bgcolor="#006699" text="#FFFFFF"><form name="f1">
<table align="center">
<table width="75%" border="1" align="center" bgcolor="#009900">
<tr>
<td><h1 align="center"><font color="#000000">Ejemplo de Formulario.</font></h1>
<p align="center">Darse de alta en un portal, inscripción para usuarios,
etc.</td>
</tr>
</table>
<p>&nbsp;</p>
<div align="center">
<center>
<table width="608" height="341" bgcolor="#006699"border="0" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
<tr><td width="219"><p>Introduzca sus apellidos(<font color="#FF0000">*</font>)</p>
<td align="center" width="386"><input type="text" size="30" name="cognoms">
<tr><td width="219"><p>Introduzca su nombre(<font color="#FF0000">*</font>)</p>
<td align="center" width="386"><input type="text" size="30" name="nom">
<tr><td width="219">Sexo(<font color="#FF0000">*</font>)<td align="center" width="386">
Varon<input type="radio" value="V1" checked name="R1">Hembra<input type="radio" name="R1" value="V2"><tr>
<td width="219">&nbsp;<td align="center" width="386">&nbsp;<tr>
<td width="219"><p>Introduzca su nick(<font color="#FF0000">*</font>)</p>
<td align="center" width="386"><input type="text" size="30" name="nick">
<tr><td width="219"><p>Introduzca su e-mail(<font color="#FF0000">*</font>)</p>
<td align="center" width="386"><input type="text" size="30" name="email">
<tr><td width="219"><p>Introduzca el password(<font color="#FF0000">*</font>)</p>
<td align="center" width="386"><input type="password" size="30" name="pass1">
<tr><td width="219"><p>Verifique el password(<font color="#FF0000">*</font>)</p>
<td align="center" width="386"><input type="password" size="30" name="pass2">
<tr><td width="219"><p>Introduzca el codigo postal(<font color="#FF0000">*</font>)</p>
<td align="center" width="386"><input type="text" size="30" name="cp">
<tr><td width="219"><p>Introduzca su ocupacion</p>
<td align="center" width="386"><input type="text" size="30" name="ocupacion">
<tr><td width="219"><p>Introduzca su localidad</p>
<td align="center" width="386"><input type="text" size="30" name="localidad">
<tr><td width="219"><p>Introduzca sus aficiones</p>
<td align="center" width="386"><input type="text" size="30" name="aficiones">
<tr><td width="219"><p>Introduzca su direccion de msn</p>
<td align="center" width="386"><input type="text" size="30" name="msn">
<tr><td width="219"><p>Introduzca su foto</p><td align="center" width="386"><input type="file" size="20" name="avatar">
<tr><td valign="top" width="219"><p>Introduzca un comentario</p>
<td align="center" width="386"><textarea cols="37" rows="5"></textarea>
<tr align="center">
<td colspan="2" width="606">
<input name="button" type="button" onClick="comprovar(), formtest()" value="enviar">
<tr align="center">
<td colspan="2" width="606">
&nbsp;</table>
</center>
</div>
<p align="center">Los campos con un * se tienen que rellenar obligatoriamente</p>
</body>
</html>