Ya vimos como manejarnos con formularios. Ahora vamos a ver algunas funciones que sirven para mejorar la comunicación con el usuario.
La primera sirve para validar datos, útil en el momento de llenar un formulario. El ingreso correcto de los datos es importante para que luego no se generen errores. Por ejemplo, si tenemos que llenar un formulario con el nombre, apellido, edad, DNI, telefono y mail, vamos a querer que la persona no deje en blanco ningún campo, que el DNI y la edad tengan nada mas que números y que el mail sea válido.
La ventaja que tiene utilizar validaciones por Javascript, es que se hacen en tiempo real, es decir que no se pierde tiempo en procesar el formulario. ¿Cómo es esto? Las validaciones también se podrían por un lenguaje tipo ASP, CGI o PHP, pero si al mandar a procesar el formulario hay algun error en el ingreso se va a informar del error y vamos a tener que volver a llenar los datos.
Es decir, no es efectivo hacer las validaciones únicamente por estos lenguajes porque se pierde tiempo de procesamiento. Sin embargo, es conveniente controlar utilizando ambos lenguajes, ya que a veces se puede saltear el control de JavaScript.La primer función controla que el campo no este vacío, chequea que el parámetro que le llega no sea NULL, si esto ocurre sigue y devuelve FALSE, pero si está vacío devuelve TRUE.Function estaVacio(texto){
If (texto == null || texto == ""){
Return true
}
return false
}
La función esInteger, que recibe un campo como parámetro, chequea que cada caracter sea un número. Esto lo hace leyendo el último dato ingresado y comparando con los valores de los números en ASCII (es una asignación que se le da a las teclas en un número).
Es importante aclarar que en la llamada a la función se debe incorporar el evento onKeyPress. En la mitad de la funcion chequeo de que navegador viene, ya que la la lectura de la tecla presionada es diferente en el Netscape, de los demas exploradores.
function esInteger(e) {
var charCode
if (navigator.appName == "Netscape") // me fijo
charCode = e.which // leo la tecla en ASCII que ingreso
else
charCode = e.keyCode // leo la tecla en ASCII que ingreso
if (charCode > 31 && (charCode < 48 || charCode > 57))
alert("Esto no es un Numero !!")
return false
}
return true
}El ejemplo de abajo sirve para chequear que un campo esté entre dos números. En este caso el campo que llega como parámetro se lo compara para saber si esta entre 1 y 21. Cambiando las condiciones podemos adaptarlo a lo que nosotros queramos.
function inrange(inputStr){
num = parteInt(inputStr)
if (num >= 1 && num <= 21){
return false
}
return true
}Este último ejemplo es útil para validar emails, por ejemplo, para una lista de correo o subscripciones donde la dirección tiene que estar correctamente escrita. Es muy sencillo: simplemente chequeamos que en todo el texto haya una arroba. Si se quiere complicar un poco mas se puede controlar que figure al menos un punto despues de la arroba y los sufijos net, org, o com después.
function esEmail(texto) {
var textoStr = texto.toString() // transformo a string todo el campo
var tiene = 0
for(var i = 0;i < texto.length;i++){ // recorro letra por letra
var oneChar = textoStr.charAt(i)
if (oneChar == "@"){ // busco una arroba en cada letra
tiene = 1
}
}
if (tiene == 1){ // controlo si existe o no una arroba
alert("El Email es valido")
return true
} else {
alert("El Email no es valido")
return false
}
}
Veamos un ejemplo completo donde se utilizan todas las validaciones:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JAVASCRIPT">
function chequear(texto){
if (texto == null || texto == "") //chequeamos que este vacio o NULL
alert("Esta Vacio")
else
alert("Esta Lleno")
}
function esInteger(e) {
var charCode
if (navigator.appName == "Netscape") // Veo si es Netscape o Explorer (mas adelante lo explicamos)
charCode = e.which // leo la tecla que ingreso
else
charCode = e.keyCode // leo la tecla que ingreso
status = charCode
if (charCode > 31 && (charCode < 48 || charCode > 57)) { // Chequeamos que sea un numero comparandolo con los valores ASCII
alert("Esto no es un Numero !!")
return false
}
return true
}
function enRango(texto){
num = parseInt(texto) // tranformamos el texto en numérico
if (num >= 1 && num <=21){ // comparamos ...
alert("Esta entre 1 y 21")
return false
}
alert("NO Esta entre 1 y 21")
return true
}
function esEmail(texto) {
var textoStr = texto.toString() // transformo a string todo el campo
var tiene = 0
for(var i = 0;i < texto.length;i++){ // recorro letra por letra
var oneChar = textoStr.charAt(i)
if (oneChar == "@"){ // busco una arroba en cada letra
tiene = 1
}
}
if (tiene == 1){ // controlo si existe o no una arroba
alert("El Email es valido")
return true
} else {
alert("El Email no es valido")
return false
}
}
</SCRIPT>
<form>
Esta vacío? <INPUT type="text" name="vacio" onBlur="chequear(vacio.value)">
Es numérico ? <INPUT type="text" name="numerico" onKeyPress="return esInteger(event)">
Un rango? <INPUT type="text" name="rango" onBlur="enRango(rango.value)">
Es un email ?<INPUT type="text" name="email" onBlur="esEmail(email.value)">
</form>
</BODY>
</HTML>
Próxima página » Cómo crear ventanas a medida
Las fotos más impactantes. Dejá tus comentarios.
Partes de esta nota
I. 
Casos policiales + investigaciones especiales.
Ahorros, inversiones, compras y ventas.