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 además averiguaremos si incluye ‘@’ sino la dirección de email es incorrecta. Primero veamos el código 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 línea de este código, observen que se define un evento ‘OnSubmit’ y en este evento llamamos a una función JavaScript llamada ‘validar()’, noten que antes utilizamos la palabra clave return, esto sirve para cancelar el envío del formulario si este no es valido, ahora veamos el código 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 explicación, lo primero que hacemos es definir la función que la palabra clave ‘function’, después 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 envíe, luego analizamos el campo email pero esta ves utilizamos el método ‘match’ el cual nos devuelve verdadero o true si se encuentra el carácter pasado como parámetro, es fácil no, nos quedaría por averiguar si el campo email tiene como mínimo un punto ‘.’ pero esto se lo dejo a ustedes así practican. Saludos, El Guru
