Problemas al validar formulario

caledonia11 · #1 (**permalink**) 21/09/2007, 03:10

Buenas a todos,
Tengo este formulario, que funcionaba perfectamente, hasta que le intente meter la funcion valida para comprobar que los campos de nombre, telefono y email no estaban vacios. Ahora tambien funciona, pero no me hace caso de la funcion valida, no se por que. He buscado en todos los temas del foro, pero no entiendo nada de esta funcion, mas bien lo he intentado por el clasico metodo de ensayo y error. Les ruego si me puede dar alguna pista. Muchisimas gracias a todos por adelantado.

Aqui el formulario con los scripts (Perdon por el desorden y los formatos, ya que he intentado recortar todo lo innecesario del formato original, que esta incluido en una tabla de una pagina web).

<html>

<script>

function dp(price)

{

string = "" + price;

number = string.length - string.indexOf('.');

if (string.indexOf('.') == -1)

return string + '.00';

if (number == 1)

return string + '00';

if (number == 2)

return string + '0';

if (number > 3)

return string.substring(0,string.length-number+3);

return string;

}

function calculate()

{

document.calcform.total1.value = dp((document.calcform.price1.value)*(document.calc form.quantity1.value))

document.calcform.total2.value = dp((document.calcform.price2.value)*(document.calc form.quantity2.value))

document.calcform.subtotal.value = dp(eval(document.calcform.total1.value) + eval(document.calcform.total2.value))

document.calcform.tax.value = dp((document.calcform.subtotal.value)*0.05)

document.calcform.total.value = dp((document.calcform.subtotal.value)*1.05)

}

function validar(calcform) {

if (calcform.nombre.value.length==0){
alert("Tiene que escribir su nombre")
document.calcform.nombre.focus()
return 0;
}

if (calcform.nombre.Telefono.length==0){
alert("Tiene que escribir su nombre")
document.calcform.nombre.focus()
return 0;
}

if (calcform.nombre.Email.length==0){
alert("Tiene que escribir su nombre")
document.calcform.nombre.focus()
return 0;
}

}

</script>

<form name="calcform" action="compra.php" method="post"><font
face=Tahoma color=#94711f size=1><strong><em>El
pedido se realiza en cajas de 12
unidades</em></strong></font>
<table cellpadding="2" border="2" cellspacing="2"><tr><td>
<p align="center"><font face="Tahoma"
size=1><strong>REFERENCIA</strong></font></p></td><td>
<p align="center"><font face="Tahoma"
size=1><strong>CAJAS</strong></font></p></td><td>
<p align="center"><font face="Tahoma"
size=1><strong>PRECIO</strong></font></p></td><td>
<p align="center"><font face="Tahoma"
size=1><strong>TOTAL</strong></font></p></td></tr>

<tr>
<td><font face="Tahoma"
size=1>VCS Tinto 2006:
</font></td>
<td><input name="quantity1" onchange="calculate()" style="WIDTH: 43px; HEIGHT: 22px"
size=1><font face="Tahoma"
size=1></font></td>
<td><input type="hidden" name="price1" value="66" onchange="calculate()" style="WIDTH: 22px; HEIGHT: 22px" size="2"><font face="Tahoma" size="1">66 euros/caja</font></td>
<td><input name="total1"
style="WIDTH: 76px; HEIGHT: 22px" size=9
><font
face=Tahoma size=1></font></td></tr>

<tr>
<td><font face="Tahoma" size="1">VCS Blanco 2006:
</font></td>
<td><input name="quantity2" onchange="calculate()" style="WIDTH: 44px; HEIGHT: 22px"
size=1><font face="Tahoma"
size=1></font></font></td>
<td><input type="hidden" name="price2" value="66" onchange="calculate()" style="WIDTH: 23px; HEIGHT: 22px" size="2"><font size="1"><font
face=Tahoma>66 euros/caja<font
> </font></font></font></td>
<td><input name="total2"
style="WIDTH: 74px; HEIGHT: 22px" size=9
><font
face=Tahoma size=1></font></td></tr>

<tr><td><font face="Tahoma"
size=1>       & nbsp;       &nb sp;       &nbsp ;   
</font></td><td></td><td><font face="Tahoma"
size=1><strong>SUBTOTAL  
</strong></font></td><td><input name="subtotal"
style="WIDTH: 74px; HEIGHT: 22px" size=8
><font
face=Tahoma size=1><strong></strong></font></td></tr>
<tr><td><font face="Tahoma"
size=1><strong></strong></font></td><td><strong></strong></td><td><font face="Tahoma"
size=1><strong>IGIC</strong></font></td><td><input name="tax"
style="WIDTH: 74px; HEIGHT: 22px" size=8
><font face="Tahoma"
size=1><strong></strong></font></td></tr>
<tr><td><font face="Tahoma"
size=1><strong></strong></font></td><td><strong></strong></td><td><font face="Tahoma"
size=1><strong>TOTAL</strong></font></td><td><input name="total"
style="WIDTH: 74px; HEIGHT: 22px" size=8
></td></tr></table><br>      &nbs p;                 &n bsp;       &nbs p;                 &n bsp;     <input type="button" value="Recalcular" onclick="calculate()"><br> 

<p><font face="Tahoma"
color=#94711f
size=2>Nombre:</font>
     <input name="Nombre" style="WIDTH: 188px; HEIGHT: 22px" size="24"
><br><font face="Tahoma"
color=#94711f
size=2>E-mail:</font>        <input name="Email" style="WIDTH: 190px; HEIGHT: 22px" size="22"
><br><font face="Tahoma"
color=#94711f
size=2>Telefono:</font> 
   <input name="Telefono" style="WIDTH: 188px; HEIGHT: 22px" size="23"
></p>
<p><font face="Tahoma"
color=#94711f size=2>Direccion de
Envio:</font></p>
<p> <textarea style="WIDTH: 264px; HEIGHT: 97px" name="Direccion" rows="5" cols="28"></textarea></p>

<p align="right"><input type="submit" value="Enviar" onClick="Validar(calcform)" >        & nbsp;   </p></form></div></td></tr></table></
td></td>

</body>

</html>

Kelpie · #2 (**permalink**) 21/09/2007, 06:45

A primera vista veo unos par de errores:

En la función calculate() tienes escrito en dos líneas "calc form", con un espacio, lo que es un error de JavaScript.

En el onClick del botón submit llamas a Validar(), pero la función se llama validar(), con minúscula. Por eso no te funciona...

También el campo Nombre está con mayúsculas e intentas referenciarlo en la función validar como 'nombre' en minúsculas.

El campo Teléfono en la función se referencia por calcform.nombre.telefono, cuando debería ser solo calcform.Telefono

Yo cambiaría:

1.- Llamar en el onClik a validar(calcform); con minúsculas
2.- Dentro de validar respetar también las mayúsculas/minúsculas y el nombre verdadero de cada campo.

Saludos

Kelpie · #3 (**permalink**) 21/09/2007, 07:00

Por otra parte, donde se valida el teléfono, en caso de que no cuele se hace un calcform.nombre.focus() cuando debería ser calcform.Telefono.focus();

También cambiaría el tipo del botón enviar a button

Código HTML:

<input type="button" value="Enviar" onClick="validar(calcform)" >

y pondría en la función validar, justo antes de la última llave un submit:

Código:

 ... 
 return 0;
 }
calcform.submit();
}

caledonia11 · #4 (**permalink**) 25/09/2007, 05:39

Muchisimas gracias Kelpie, me has sido de gran ayuda. Efectivamente habian errores tontos que hacian que no funcionara. He corregido lo que me indicaste y ya funciona perfectamente!

Solo una pequeña cosillas mas. Si no escribes tu nombre, por ejemplo, sale un aviso indicando que debes hacerlo, pero automaticamente llama a la funcion compras.php, cuando deberia quedarse en la pagina del formulario en espera de que rellenes el dato. Como consigo esto?

Lo dicho, muchas gracias de nuevo y espero que alguien me ayude con esta ultima piedra en el camino!!

Saludos

caledonia11 · #5 (**permalink**) 25/09/2007, 08:42

Cita:

Iniciado por caledonia11

Muchisimas gracias Kelpie, me has sido de gran ayuda. Efectivamente habian errores tontos que hacian que no funcionara. He corregido lo que me indicaste y ya funciona perfectamente!

Solo una pequeña cosillas mas. Si no escribes tu nombre, por ejemplo, sale un aviso indicando que debes hacerlo, pero automaticamente llama a la funcion compras.php, cuando deberia quedarse en la pagina del formulario en espera de que rellenes el dato. Como consigo esto?

Lo dicho, muchas gracias de nuevo y espero que alguien me ayude con esta ultima piedra en el camino!!

Saludos

Ni caso!!! Kelpie, habia omitido tu ultima recomendacion, la de cambiar el nombre al boton de enviar. Ahora esta solucionado. Gracias a todos y hasta la proxima!

Kelpie · #6 (**permalink**) 26/09/2007, 07:58

Tal y como me ha indicado (con tirón de oreja incluido) caricatos en otro hilo, el tema de cambiar el tipo al botón submit hace inaccseible el formulario (tema accesibilidad).

La manera de mantener el submit sería:

Modificar el tag de entrada del formulario:

Código HTML:

<form name="calcform" action="compra.php" onsubmit="validar(calcform)" method="post">

De esta manera se invoca a la función validar() al intentar enviar el formulario. Luego se deja el submit normal:

Código HTML:

<input type="submit" value="Enviar">

Y haz que la función devuelva true o false en vez de 0

Código:

function validar(calcform) {
   if (calcform.nombre.value.length==0){
     alert("Tiene que escribir su nombre");
     document.calcform.nombre.focus();
     return false;
   }
   ....