|
En este articulo vamos a aprender como validar los campos de un formulario, lo haremos del lado del cliente utilizando el famoso JavaScript, supongamos que tenemos este formulario:
Lo que queremos es que el usuario nos ingrese de forma obligatoria su 'nombre y apellido' y su 'email', con el email ademas averiguaremos si incluye '@' sino la direccion de email es incorrecta. Primero veamos el codigo html que genera el formulario:
<form name="Formulario" method="post" action="" OnSubmit="return validar(this)">
<table width="98%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="47%" align="center">
<div align="right"><b>Nombre y Apellido </b></div>
</td>
<td width="53%">
<input type="text" name="nomyape">
</td>
</tr>
<tr>
<td width="47%" align="center">
<div align="right"><b>Email </b></div>
</td>
<td width="53%">
<input type="text" name="email">
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" name="Submit" value="Enviar">
</td>
</tr>
</table>
</form> |
Miren bien la primer linea de este codigo, observen que se define un evento 'OnSubmit' y en este evento llamamos a una funcion JavaScript llamada 'validar()', noten que antes utilizamos la palabra clave return, esto sirve para cancelar el envio del formulario si este no es valido, ahora veamos el codigo JavaScript que valida el formulario:
<script language="JavaScript">
function validar()
{
ingreso = new String()
ingreso = this.Formulario.nomyape.value
if (ingreso.length == 0)
{ alert("Debe ingresar el Nombre y Apellido.")
return false
}
ingreso = this.Formulario.email.value
if (!ingreso.match("@"))
{ alert("Debe ingresar el Email o verifique que sea correcto.")
return false
}
return true
}
</script>
|
Ahora una breve explicacion, lo primero que hacemos es definir la funcion que la palabre clave 'function', despues creamos una variable del tipo cadena o string que le asignamos el valor del campo 'nomyape', luego comprobamos con un 'if' que el tamaño del texto sea igual a 0, si esto se cumple mostramos una advertencia y ponemos el return a falso, al poner el return a falso evitamos que el formulario se envie, luego analizamos el campo email pero esta ves utilizamos el metodo 'match' el cual nos devuelve verdadero o true si se encuentra el caracter pasado como parametro, es facil no, nos quedaria por averiguar si el campo email tiene como minimo un punto '.' pero esto se lo dejo a ustedes asi practican. Saludos,
|
