validar textfield

lisen · #1 (**permalink**) 28/11/2007, 11:57

que tal tengo el siguiente codigo para validar un textbox, funciona, aunque con un inconveniente, solo debe permitir la entrada de numeros, en este caso solo 4, si se deja en blanco manda mensajede error, si le pongo los 4 digitos numericos no hace nada (esta bien) pero si le pongo: _333 me lo valida, o si le pongo: 333_ tambien me lo valida, pero si el espacio se lo pongo en medio: 3_33 si me saca el error, igual pasa si en vez de espacio le ponog un punto "."

les dejo el codigo para que lo chequen y haber si me pudieran ayudar a validar lo de los espacios y los puntos, gracias

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<script language="JavaScript">
function validar(){

var num= document.getElementById('num');

if (num.value == "")
{
alert("Debe introducir su número de empleado");
document.formulario.num.focus();
return;
}
if (isNaN(num.value) || num.value.length != 4)
{
alert("El número de empleado debe ser de 4 digitos numéricos y sin espacios")
document.formulario.num.focus();
return;
}

this.formulario.submit();

}

</script>
<form method="post" name="formulario" id="formulario" onSubmit="return validar()">
<div align="center">
<p>BIENVENIDO</p>
<p>POR FAVOR INTRODUZCA SU NUMERO DE EMPLEADO</p>
<p>
<label>
<input type="text" maxlength="4" size="4" id="num" name="num"/>
</label>
<label>
<input type="Button" name="ok" id="ok" value="Verificar" onclick="validar()"/>
</label>

</p>
</div>
</form>
<form id="form1" name="form1" method="hidden" action="$result"><label></label></body>
</html>

JavierB · #2 (**permalink**) 28/11/2007, 12:09

Hola lisen

He modificado tu código, creo que te servirá:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<script type="text/javascript">
function validar(frm){
  patron = /\d{4}/;
  return patron.test(frm.num.value);  
}

</script>
<form method="post" name="formulario" id="formulario" onsubmit="return validar(this)">
<div align="center">
<p>BIENVENIDO</p>
<p>POR FAVOR INTRODUZCA SU NUMERO DE EMPLEADO</p>
<p>
<label>
<input type="text" maxlength="4" size="4" id="num" name="num"/>
</label>
<label>
<input type="submit" />
</label>

</p>
</div>
</form>
<form id="form1" name="form1" method="hidden" action="$result"><label></label></body>
</html>

Saludos,

lisen · #3 (**permalink**) 28/11/2007, 12:17

gracias por tu repsuesta, el codigo esta bien, una pregunta a la penultima linea no le hace falta el </form>???
y otra cosa, me gustaria que cuando no se introdujeran numeros o que estuviera vacio el area que sacara un mensaje de error, asi como sale en mi codigo, como lo podria poner??

gracias nuevamente

JavierB · #4 (**permalink**) 28/11/2007, 12:27

Hola de nuevo.

La penúltima línea, ni me había fijado, he copiado tu código. Tampoco la entiendo, nunca había visto un method="hidden", no tiene ningún campo...

Para que aparezca el mensaje de error:

Código:

function validar(frm){
  patron = /\d{4}/;
  if (!patron.test(frm.num.value)) {
    alert('Error');
    return false;
  }  
}

Saludos,

lisen · #5 (**permalink**) 28/11/2007, 12:31

muchas gracias por tu respuesta, me funciono perfecto, y lo de la penultima linea fue error mio, lo que pasa es que una vez introducido el num, abajo se despliega la informacion relacionada con ese numero, son etiquetas que estan ocultas, por eso es lo del "hidden".

gracias nuevamente por tu ayuda.
saludos