Validar numero con decimales

majo_83 · #1 (**permalink**) 31/05/2012, 18:46

Hola a todos, estoy trabajando con php y javascrip, necesito validar el campo peso y permitir que se cargue solo si cumple la condicion, eso lo consigo con la siguiente función
<script>
function validar (n){
if (!/^([0-9])*$/.test($n))
{ alert("El valor " + $n + " no es un número");}
else if ($n > 50.00 )
alert ("Ingrese el peso en kg")
}
</script>
El tema es que también tengo que permitir que se ingresen decimales como peso ej.: 20.5 y no sé cómo hacer para validar cuando tengo decimales
Gracias por la ayuda de ante mano..

emprear · #2 (**permalink**) 31/05/2012, 19:39

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 número, entero o float</title>
<script type="text/javascript">
//<![CDATA[
function validar(campo){ 
var elcampo = document.getElementById(campo);   
if((!validarNumero(elcampo.value))||(elcampo.value == "")){
elcampo.value = "";
elcampo.focus();
document.getElementById('mensaje').innerHTML = 'Debe ingresar un número';
}else{
document.getElementById('mensaje').innerHTML = '';
 
// Aqui pones el resto de las condiciones usando comparadores u operadores aritméticos, ya que estás seguro de que trabajas con números 
 
}
}
 
function validarNumero(input){
return (!isNaN(input)&&parseInt(input)==input)||(!isNaN(input)&&parseFloat(input)==input);
}
//]]>
</script>
</head>
<body>
<form action="#">
<input type="text" id="precio" name="precio" value="" onkeyup="validar(this.id);" /><br /><br />
<input type="submit" value="procesar" /><br /><br />
</form>
<div id="mensaje"></div>
</body>
</html>

Saludos

majo_83 · #3 (**permalink**) 01/06/2012, 07:15

Gracias Gracias.. voy a probarlo..Saludos

majo_83 · #4 (**permalink**) 01/06/2012, 08:52

Me sirvió, ahora el tema es que cuando quiero poner la condición
if (elcampo.value =< 80 && elcampo.value >= 190 ){alert('aqui va el mensaje');}
no hace nada, en cambio si pongo solo
if (elcampo.value >190 ){alert('aqui va el mensaje');}
me tira el mensaje cuando corresponde
ya probé varias opciones y no logro la solución..Gracias

emprear · #5 (**permalink**) 01/06/2012, 11:41

los comparadores son
<= menor o igual
>= mayor o igual

este, que es el que usaste:
=<
no existe
Po otro lado cual es la condición que querés?
aceptar valores que esten entre 80 y 190 (ejemplo, 80 85 120 170 189 190)
ó
valores que sean menores a 81 (80 para abajo) y mayores a 189 (190 para arriba)

Si corregimos lo que pusiste, agrupando las expresiones
if((elcampo.value <= 80) && (elcampo.value >= 190))
el usuario va a poder poner cualquier numero, porque nunca obviamente un número puede ser menor a 80 Y (&&) al mismo tiempo mayor a 190

En todo caso, usando OR (||) tendría más logica
if((elcampo.value <= 80) || (elcampo.value >= 190))

Saludos

IsaBelM · #6 (**permalink**) 01/06/2012, 14:54

volviendo a tu primera consulta, esta expresión admite que sean números enteros o decimales

Cita:

/^(\d)+((\.)(\d){1,2})?$/

el resto es lo que te comenta emprear

majo_83 · #7 (**permalink**) 01/06/2012, 19:02

Mil gracias por la ayuda…
La condición es que el usuario puede ingresar números mayores a 80 pero menores a 190 ósea tengo q permitir solo ese rango sino mostrar el mensaje.

emprear · #8 (**permalink**) 01/06/2012, 21:25

Siendo ese el caso, en conceto te quedaria así

Código Javascript:

Ver originalif ((elcampo.value <= 80) || (elcampo.value >= 190 )){
document.getElementById('mensaje').innerHTML = 'valor no permitido';
}else{
document.getElementById('mensaje').innerHTML = 'Valor correcto';
}

De todas maneras, te repito lo que a muchos otros usuarios, todo este tipo de validaciones con javascript son bastante inseguras, a lo sumo tendrían que tener por objeto mejorar la usabilidad del usuario, lo importante es que valides del lado del servidor, ó matar 2 pájaros de un tiro haciendo el ennvio a php con Ajax.
Hay muchas formas de burlar tu método, una muy sencilla, el usuario no tipea nada, simplente copia de otro lado el número 7878 y lo pega en el campo, todo, con el solo uso del mouse, entonces ya necesitarías de una segunda validación, esta vez con el evento onsubmit...
bueno, es solo ua advertencia

Saludos

majo_83 · #9 (**permalink**) 02/06/2012, 08:02

Ahh...OK mil gracias por esta info y por la ayuda, lo tendre en cuenta... Saludos..

majo_83 · #10 (**permalink**) 03/06/2012, 15:38

Funciona perfecto, solo que use alert para mostrar los mensajes, ya que si lo dejaba con document.getElementById('mensaje').innerHTML al colocar la función en un formulario de varios campos como el que estoy manejando no me muestra nada. El tema es que si o si el usuario usa el tabulador para ir moviendo el cursor dentro del formulario y cuando llega al campo al que le aplico la función muestra el mensaje(alert) antes de escribir nada.
Tengo alguna manera de solucionar esto??
Gracias...

majo_83 · #11 (**permalink**) 03/06/2012, 16:01

También pasa que cuando apretó, por ejemplos, la tecla del n°8 ya me pone el alert de que no es un valor permitido y en realidad debería dejarme ingresar por ej. 81,82…

IsaBelM · #12 (**permalink**) 03/06/2012, 17:03

pensaba que simplemente validabas el formulario con submit, pero según los problemas que tienes no es así. básicamente lo que pretendes hacer es una mascara de entrada. para lo cual no creo que tengas conocimientos suficientes
te dejo una mascara de entrada para validar una fecha con el propósito de que desistas

Cita:

<!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>Documento sin título</title>
<script type="text/javascript">
var patron = new Array(4,2,2)
function fnc(elem,separador,pat,numerico) {
if(elem.valoranterior != elem.value) {
valor = elem.value;
largo = valor.length;
valor = valor.split(separador);
valor2 = "";

for(i=0; i<valor.length; i++) {
valor2 += valor[i];
}

if(numerico){
for(j=0; j<valor2.length; j++){
if(isNaN(valor2.charAt(j))){
letra = new RegExp(valor2.charAt(j),"g");
valor2 = valor2.replace(letra,"");
}
}
}

valor = "";
valor3 = new Array();
for(n=0; n<pat.length; n++) {
valor3[n] = valor2.substring(0,pat[n]);
valor2 = valor2.substr(pat[n]);
}

for(q=0; q<valor3.length; q++) {
if(q == 0) {
valor = valor3[q];
}else{
if(valor3[q] != "") {
if (valor3[1] > 12 ) {
valor = valor3[0];
} else if (valor3[2] > 31) {
valor = valor3[0] + separador + valor3[1];
}else{
valor += separador + valor3[q];
}

}
}
}

elem.value = valor;
elem.valoranterior = valor;
}
}
</script>
</head>
<body>
<form>
<h1>Valida una fecha yyyy-mm-dd</h1>
<input type="text" name="fecha" id= "fecha" onkeyup="fnc(this,'-',patron,true)" maxlength="10" />
</form>
</body>
</html>

emprear · #13 (**permalink**) 03/06/2012, 17:33

Cita:

Iniciado por majo_83

Funciona perfecto, solo que use alert para mostrar los mensajes, ya que si lo dejaba con document.getElementById('mensaje').innerHTML al colocar la función en un formulario de varios campos como el que estoy manejando no me muestra nada. El tema es que si o si el usuario usa el tabulador para ir moviendo el cursor dentro del formulario y cuando llega al campo al que le aplico la función muestra el mensaje(alert) antes de escribir nada.
Tengo alguna manera de solucionar esto??
Gracias...

Cita:

Iniciado por majo_83

También pasa que cuando apretó, por ejemplos, la tecla del n°8 ya me pone el alert de que no es un valor permitido y en realidad debería dejarme ingresar por ej. 81,82…

Te tiene que funcionar de las dos maneras, mezclar onkeyup con alerts no te lo recomiendo. Con lo del tabulador, a lo hecho hay que sumar la deteccción de la tecla
probá esto

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 número, entero o float</title>
<script type="text/javascript">
//<![CDATA[
function validar(campo,e){ 
var elcampo = document.getElementById(campo);   
e = (e) ? e : ((event) ? event : null);
var version = (e.target) ? e.target : ((e.srcElement)?e.srcElement : null );
var teclaNum = e.keyCode;
if(teclaNum != 9){
    
if((!validarNumero(elcampo.value))||(elcampo.value == "")){
elcampo.value = "";
elcampo.focus();
document.getElementById('mensaje').innerHTML = 'Debe ingresar un número';
}else{
document.getElementById('mensaje').innerHTML = '';
 
// Aqui pones el resto de las condiciones usando comparadores u operadores aritméticos, ya que estás seguro de que trabajas con números 
if ((elcampo.value < 80) || (elcampo.value > 190)){
document.getElementById('mensaje').innerHTML = 'valor no permitido';
}else{
document.getElementById('mensaje').innerHTML = '';
}
 
} // fin valida num
} // fin detectar tecla
} // fin función
 
function validarNumero(input){
return (!isNaN(input)&&parseInt(input)==input)||(!isNaN(input)&&parseFloat(input)==input);
}
//]]>
</script>
</head>
<body>
<form action="#">
texto <input type="text" id="nombre" name="nombre" value="" /><br />
número rango <input type="text" id="precio" name="precio" value="" onkeyup="validar(this.id,event);" /><br />
número rango <input type="text" id="precio2" name="precio2" value="" onkeyup="validar(this.id,event);" /><br />
<input type="submit" value="procesar" /><br /><br />
</form>
<div id="mensaje"></div>
</body>
</html>

funciona correctamente y hay tres campos (en 2 se valida en otro no) y te acepta números enteros como flotantes

Y por favor para otros posts, indicá concretamente cuantos campos hay, si deben validar todos o no etc, ya que esto resulta en respuestas completamente diferentes

Saludos

majo_83 · #14 (**permalink**) 03/06/2012, 17:37

OK... Lo voy a tener en cuenta...Gracias por tu ayuda emprear.. Voy a probarlo...