Borrar datos de Form

oNefl0w189 · #1 (**permalink**) 23/05/2012, 05:00

Hola, tengo el siguiente formulario (adjunto código abajo), al cual le valido mediante javascript que sea un número. Si no es un número da un error. Hasta ahí todo OK.

El problema, viene en que si metes caracteres que no son un número, te salta el error, pero el formulario tira hacia delante..

Me gustaría que si meten datos que no son numéricos me diese el error, y a continuación me dejase el Focus en el mismo campo, y me limpiase los datos de ese campo, es decir, me lo dejase vacío de nuevo.

Pero nose como hacerlo, si me podéis echar una mano...

Formulario:

Código:

<fieldset>
<legend>* Cuestionario *</legend>
<br>
<ul>
<li>
» Numero de Pregunta: <input type="number" size="50" min="1" max="90" name="pregunta" id="pregunta" placeholder="Introduce el número de la pregunta" onChange="validarSiNumero(this.value);" required/> <br> <br>
</li>
</ul>

</fieldset>

validacion:

Código:

<script>
function validarSiNumero(numero){
if (!/^([0-9])*$/.test(numero))
alert("El valor '" + numero + "' no es un número");
}
</script>

Un saludo, y desde ya muchas gracias.

djaevi · #2 (**permalink**) 23/05/2012, 07:18

Código Javascript:

Ver originalfunction validarSiNumero(numero){
if (!/^([0-9])*$/.test(numero))
document.nombreFormulario.pregunta.focus();
document.nombreFormulario.pregunta.value = 0;
alert("El valor '" + numero + "' no es un número");
}

En nombreFormulario reemplaza por el attributo name de tu formulario.
Como ves le asigno document.ElNombreDelFormulario.AttributoNameDelInp ut

tambien se podria hacer por id y quedaria asi:

Código Javascript:

Ver originalfunction validarSiNumero(numero){
if (!/^([0-9])*$/.test(numero))
document.getElementById("pregunta").focus();
document.getElementById("pregunta").value = 0;
alert("El valor '" + numero + "' no es un número");
}

Saludos

oNefl0w189 · #3 (**permalink**) 24/05/2012, 00:31

Muchas gracias Djaevi, aunque no me funciona del todo, pero me resulta suficiente.

Te explico, no me funciona del todo porque no me devuelve el focus a ese campo, pero con que me vacie el campo me resulta suficiente, porque como es un campo requerido si no esta relleno o no tiene los datos correctos ya no puede enviar el formulario :)

El gran problema es que añadiendo las líneas

Código:

document.formulario.pregunta.focus();
document.formulario.pregunta.value = "";

La validación ya no la realiza, da igual que le metas la cadena 'asdjnas' o '1233' que borra los datos.
He probado y borrando esas 2 lineas funciona bien.. :S
No entiendo porque pasa esto, si no tiene nada que ver, no?
El caso es que si metes numeros no salta el alert pero si vacia el contenido del input :S

Pero ahora necesito que esto se lo pueda aplicar a varios campos, porque son 4 campos los que quiero validar si son numéricos o no (siempre los mismos, pero estos 4).

Espero que puedan ayudarme, un saludo y muchas gracias!

emprear · #4 (**permalink**) 24/05/2012, 03:03

Tendrías que hacerlo asi

Código HTML:

Ver original<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>validar entero</title>
<script type="text/javascript">
//<![CDATA[
function validar(campo){ 
var elcampo = document.getElementById(campo);   
if((!validarEntero(elcampo.value))||(elcampo.value == "")){
elcampo.value = "";
elcampo.focus();
alert('Debe ingresar un número');
}
}
 
function validarEntero(input){
return !isNaN(input)&&parseInt(input)==input;
}
//]]>
</script>
</head>
<body>
<form action="#">
<input type="text" id="pregunta" name="pregunta" value="" onkeyup="validar(this.id);" />
<input type="text" id="pregunta2" name="pregunta2" value="" onkeyup="validar(this.id);" />
<input type="submit" value="procesar" />
</form>
</body>
</html>

Además, posteriormente tendrías que crear otra función para validar el envío de todo el form si es que estás haciendo un submit. La alternativa es hacer una validacion con onsubmit, pero en ese caso el usuario no vería las alertas a medida que completa los campos, sino que advertiría los errores al presionar el boton procesar.
Saludos

oNefl0w189 · #5 (**permalink**) 25/05/2012, 01:58

Muchas gracias @emprear ahora sí! jeje.

No me devuelve el focus al campo tampoco, nose porque nunca he conseguido que devuelva el focus :S, pero bueno, eso no tiene importancia mientras borre los datos, jeje.

Aunque he modificado el onkeyup por un onChange.

código final:

validador:

Código:

function validar(campo){ 
var elcampo = document.getElementById(campo);   
if((!validarEntero(elcampo.value))||(elcampo.value == "")){
elcampo.value = "";
elcampo.focus();
}
}
 
function validarEntero(input){
return !isNaN(input)&&parseInt(input)==input;
}

implementacion:

Código:

Numero de Pregunta: <input type="number" size="50" min="1" max="90" 
name="pregunta" id="pregunta" placeholder="Introduce el número de la pregunta" 
onChange="validar(this.id);" required/>

emprear · #6 (**permalink**) 25/05/2012, 02:18

Con keyup funciona bien, además cuando haces ese tipo de validaciones contra el uso del teclado, hay que evitar los alert(), porque suelen generar problemas.
Lo más apropiado sería algo asi

Código HTML:

Ver original<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>validar entero</title>
<script type="text/javascript">
//<![CDATA[
function validar(campo){ 
var elcampo = document.getElementById(campo);   
if((!validarEntero(elcampo.value))||(elcampo.value == "")){
elcampo.value = "";
elcampo.focus();
//alert('Debe ingresar un número');
document.getElementById('mensaje').innerHTML = 'Debe ingresar un número';
}else{
document.getElementById('mensaje').innerHTML = '';
}
}
 
function validarEntero(input){
return !isNaN(input)&&parseInt(input)==input;
}
//]]>
</script>
</head>
<body>
<form action="#">
<input type="text" id="pregunta" name="pregunta" value="" onkeyup="validar(this.id);" /><br />
<input type="text" id="pregunta2" name="pregunta2" value="" onkeyup="validar(this.id);" /><br /><br />
<input type="submit" value="procesar" /><br /><br />
</form>
<div id="mensaje"></div>
</body>
</html>

Saludos

oNefl0w189 · #7 (**permalink**) 25/05/2012, 06:50

Ya he evitado los alert, les tenía puestos simplemente para comprobar su funcionamiento.

La cosa es que me borre el contenido del campo para que no puedan enviar el formulario y ya esta, jeje.

Ahora me he dado cuenta de que no pueden introducir el 0 (pues la pregunta 0 no existe) ni más del 90 (pues solo hay 90 preguntas).

He dejado la funcion así:

Código Javascript:

Ver originalfunction validar(campo){ 
var elcampo = document.getElementById(campo);   
if((!validarEntero(elcampo.value))||(elcampo.value == "")||(elcampo.value <= 0)
||(elcampo.value >= 100)||(elcampo = "pregunta" && elcampo.value >= 90)){
elcampo.value = "";
elcampo.focus();
}
}
 
function validarEntero(input){
return !isNaN(input)&&parseInt(input)==input;
}

La cosa es que en los campos de valoracion pueden meter numeros de 1 a 100. (no vale 0 ni mas de 100).
Pero sin embargo en el campo numero de pregunta, solo tienen que poder meter del 1 al 90 (ni 0 ni mas de 90).

Me funciona que no puedan meter el 0, pero no me funciona que SOLAMENTE en el campo numero pregunta no pueda meter mas de 90.

Si me podéis echar una mano.. es urgente!

Muchisimas Gracias.

oNefl0w189 · #8 (**permalink**) 27/05/2012, 14:16

Alguien puede ayudarme? xD

Gracias.

emprear · #9 (**permalink**) 27/05/2012, 15:26

hacelo por separado

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
function verificar(){
var p = document.getElementById('preg').value;
var v = document.getElementById('valora').value;
p= parseInt(p);
v = parseInt(v);
 
if((v < 1)||(v > 100)){
alert('error v');
}
 
if(( p < 1)||(p > 90)){
alert('error p');
}
 
}
//]]>
</script>
</head>
<body>
<form action="#">
pregunta: <input type="text" value="" id="preg" name="preg" /><br />
valorar: <input type="text" value="" id="valora" name="valora" /><br /><br />
<input type="button" value="verifica" onclick="verificar();" />
</form>
</body>
</html>

En tu condición,
elcampo = "pregunta" no es nada
El problema es que en tu ejemplo en ningún momento habías mencionado que hubiese dos tipos de campos, por eso integrarlos todo en una sola función se complica si no se sabe que es pregunta y que es valoración

Saludos

PD:
LAs urgencias se atienden en los hospitales, no en los foros

oNefl0w189 · #10 (**permalink**) 28/05/2012, 01:14

Muchas gracias @Emprear.

Solo necesitaba un poquito de luz para poder seguir adelante en el camino XD

Mi código finalmente ha quedado así:

Código Javascript:

Ver original//  Validacion Numérica
 
function validarEntero(input){
return !isNaN(input)&&parseInt(input)==input;
}
 
 
//Campos valoración
 
function validar(campo){ 
var valoracion = document.getElementById(campo);   
if((!validarEntero(valoracion.value))||(valoracion.value == "")||(valoracion.value <= 0)||(valoracion.value > 100)){
valoracion.value = "";
valoracion.focus();
}
}
 
 
//Campo pregunta
 
function verificar(campo){
var pregunta = document.getElementById(campo);
 
 
if((!validarEntero(pregunta.value))||(pregunta.value == "")||(pregunta.value < 1)||(pregunta.value > 90)){
pregunta.value = "";
pregunta.focus();
}
 
}

El campo 'pregunta' era uno simplemente, sin embargo los campos 'valoracion' son 3. y con distintas reglas de validación, aunque algunas comunes en los dos, por eso intenté hacerlo en la misma validación.

Un saludo y muchas gracias, espero que os sirva a vosotros también.

PD: Lo siento por el Up, pero veía como el post se quedaba cada vez más atrás y el tema era urgentillo.. (y casualmente es para un tema de un hospital XD).