validacion de formulario

Laurentina · #1 (**permalink**) 20/07/2006, 11:45

hola, tengo un archivo java script llamado validaciones.js y valida el siguiente formulario:

<?php
function Formulario_AltaProducto(){
?>
<SCRIPT LANGUAGE="JavaScript" SRC="../utilidades/validaciones.js"></SCRIPT>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="150" topmargin="80" marginwidth="0" marginheight="0">
<form action="ProcesarAltaProducto.php" method="post" name="formulario" id="formulario" onSubmit= "return validar_producto(this.formulario)">
<h1>Alta producto</h1>
<table bgcolor="#F0F8FF" width="95%" border="0" cellspacing="0" cellpadding="6" align="center">
<tr>
<td valign="top" align="left">
<table width="75%" cellpadding="3" cellspacing="0" border="1">
<tr class="celdaCampoObligatorio">
<th width="30%" align="right"> <label for="name" accesskey="N">Nombre:</label>
</th>
<td width="70%">
<input type=TEXT name="Nombre" id="Nombre" maxlength=100 size=50>
</td>
</tr>
<tr class="celdaCampoObligatorio">
<th width="30%" align="right"> <label for="field2" accesskey="P">Precio:</label>
</th>
<td width="70%">

<input type=TEXT name="Precio" id="Precio" maxlength=50 size=50>
</td>
</tr>
<tr class="celdaCampoNoObligatorio">
<th width="30%" align="right"> <label for="question" accesskey="Q">Descripcion:</label></th>
<td width="70%">
<textarea name="Descripcion" id="Descripcion" rows="10" cols="50"></textarea>
</td>
</tr>
<tr class="celdaCampoObligatorio">
<th width="30%" align="right"> <label for="field2" accesskey="P">Catalogado:</label>
</th>
<td width="70%">
<blockquote>
<p>Si<input type="radio" name="Catalogado" value="SiCatalog"></p>
<p>No<input type="radio" name="Catalogado" value="NoCatalog"></p>
</blockquote>
</td>
</tr>
<tr class="celdaCampoNoObligatorio">
<th width="30%" align="right"> <label for="field2" accesskey="P">Imagen(Introduzca ruta):</label>
</th>
<td width="70%">
<input type=TEXT name="Imagen" id="Imagen" maxlength=50 size=50>
</td>
</tr>
<tr>
<th colspan="2">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="32" class="buttonrow">
<tr>
<input type="button" name="Submit" value="Terminar">
<td width="20" align="RIGHT">
</td>
</tr>
</table>
</th>
</tr>
</table>
</tr>
<tr>
<td valign="top">
<p> </p>
</td>
</tr>
</table>
</form>
<?php
}

bueno, el caso es que el formulario me lo enseña, pero no valida ni hace nada.
creo que es en como llamar a validaciones, y ya he probado de maneras distintas, pero no sale.
a ver si me podeis echar una mano.
saludos y gracias de antemano.

caricatos · #2 (**permalink**) 20/07/2006, 19:30

Hola:

No muestras la función de validación, pero supongo que debe retornar true/false

Con esta línea:
onSubmit= "return validar_producto(this.formulario)"

Estás intentando pasar a la función validadora un campo formulario (de nombre formulario)... seguramente sea mejor pasar el objeto this (el formulario completo)

A ver si para empezar te orienta un poco...

Saludos

Laurentina · #3 (**permalink**) 21/07/2006, 02:14

Gracias Caricatos, pero es que cambiando lo que me has dicho tampoco me funciona, he probao pasandole formulario, this, this.formulario....de todo
efectivamente, el codigo java devuelve true o false.
No deberia escribir algo en onclick, tambien he probado con eso, pero a lo mejor se te ocurre algo mejor.
saludos.

xenius · #4 (**permalink**) 21/07/2006, 02:55

No crees que seria mas facil si vieramos el codigo .js ... quizas el problema sea del script que has escrito.

Laurentina · #5 (**permalink**) 21/07/2006, 03:29

el codigo js es este:

//************************************************** ************************************************** *****************
//Expresiones regulares
//************************************************** ************************************************** *****************

var patronCadena = /^\w[a-z,A-Z]+((\s)+\w[a-z,A-Z]+)*$/; //nombre, apellidos
var patronPrecio = /^(?:\+|-)?\d+\.\d*$/;
var patronImagen = /^\w[a-z,A-Z]+((\s)+\w[a-z,A-Z]+)*(\.\w{2,3})+$/;
var patronIdentificador = /^\w{2,12}$/;
var patronContraseña = /^\w{2,12}$/;
var patronDNI = /^(\d{8,8})([a-z,A-Z]{1,1})$/; //DNI o CIF
var patronEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var patronDireccion = /^\w[a-z,A-Z]+((\s)+\w[a-z,A-Z]+)*$/
var patronTelefono = /^\d{9,9}$/;
var patronEntidad = /^\d{4,4}$/;
var patronOficina = /^\d{4,4}$/;
var patronControl = /^\d{2,2}$/;
var patronCuenta = /^\d{10,10}$/;
var patronFecha = /^\d{1,2}\/\d{1,2}\/\d{4,4}$/;
var patronIva = /^\d{1,2}\.\d{1,2}$/;
var patronPaginaWeb = /^\w[a-z,A-Z,0-9,\.]*$/;

//************************************************** ************************************************** *****************
//************************************************** ************************************************** *****************
//PRODUCTO
//************************************************** ************************************************** *****************
//************************************************** ************************************************** *****************

function validar_nombreProducto(formulario){
if (formulario.Nombre.value == ""){
alert ("El campo nombre es obligatorio");
return false;
}else{
if (!patronCadena.test(formulario.Nombre.value)){
alert ("El nombre introducido no es válido");
return false;
}
return true;
}
}
//************************************************** ************************************************** *****************
function validar_precio(formulario){
if (formulario.Nombre.value == ""){
alert ("El campo precio es obligatorio")
return false;
}else{
if (!patronPrecio.test(formulario.Precio.value)){
alert ("El precio introducido no es válido");
return false;
}
return true;
}
}
//************************************************** ************************************************** *****************
function validar_Descripcion(formulario){
if (formulario.Nombre.value == ""){
return true;
}else{
if (!patronCadena.test(formulario.Descripcion.value)) {
alert ("La descripcion introducida no es válida");
return false;
}
return true;
}
}
//************************************************** ************************************************** *****************
function validar_radio(formulario){
var chequeados = 0;
for (i=0; i<document.formulario.elements.length; i++){
if(document.formulario.elements[i].type == "radio"){
if(document.formulario.elements[i].checked == 1){
return true;
chequeados = chequeados + 1
}
}
}
if(chequeados == 0){
alert("No ha seleccionado ningún elemento");
return false;
}
}
//************************************************** ************************************************** *****************
function validar_imagen(formulario){
if (formulario.Nombre.value == ""){
return true;
}else{
if (!patronImagen.test(formulario.Imagen.value)){
alert ("La ruta de la imagen no es válida, indique la extensión del archivo");
return false;
}
return true;
}
}
//************************************************** ************************************************** *****************
function validar_producto(formulario){
if(!validar_nombreProducto(formulario)){
return false;
}else{
if(!validar_precio(formulario)){
return false;
}else{
if(!validar_descripcion(formulario)){
return false;
}else{
if(!validar_radio(formulario)){
return false;
}else{
if(!validar_imagen(formulario)){
return false;
}else{
return true;
}}}}}
}

gracias.un saludo.

caricatos · #6 (**permalink**) 21/07/2006, 04:08

Hola:

Suponiendo que cada función devuelva correctamente true/false (o sea que valide correctamente)...

La etiqueta form debería tener:
<form onsubmit="validar_producto(this)"...

y validar_producto podrías smplificarlos así:

function validar_producto(f) {
return (validar_nombreProducto(f) &&
validar_precio(f) &&
validar_descripcion(f) &&
validar_radio(f) &&
validar_imagen(f));
}

Como cada una de las funciones que usas devuelven un valor lógico, con hacer la operación y-lógica (and) de todos esas funciones, pasaría la validación solo cuando todas fueran ciertas (true)

Saludos

Laurentina · #7 (**permalink**) 24/07/2006, 05:24

hola otra vez, agradezco vuestra colaboracion, pero esto sigue sin furrular, si se os ocurre alguna cosa, es que no me explico por qué no funciona.

el_javi · #8 (**permalink**) 24/07/2006, 06:27

Buenas tardes Laurentina (hola caricatos

)

He estado revisando el código que has puesto, y antes de nada, he de comentarte que tienes errores de maquetación que deberías de solventar antes.

Te especifico algunos:

1.- En la declaración del body, tienes

Código PHP:

  <body bgcolor="#FFFFFF" text="#000000" leftmargin="150" topmargin="80" marginwidth="0" marginheight="0">

como alternativa, que es aceptada por la W3c y validación tidy, te propongo esto

Código PHP:

  <body bgcolor="#FFFFFF" text="#000000" style="margin:0px;padding:0px">

2.- En la declaración de tu tr, el cual tiene este código

Código PHP:

  <tr> 
<th colspan="2"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="32" class="buttonrow"> 
<tr> 
<input type="button" name="Submit" value="Terminar"> 
<td width="20" align="RIGHT"> 
</td> 
</tr> 
</table> 
</th> 
</tr>

tienes como error, que dentro del TR no has metido un TD que contenga el INPUT
Debería quedar asi:

Código PHP:

  <tr> 
                    <th colspan="2"> 
                        <table width="100%" border="0" cellspacing="0" cellpadding="0" height="32" class="buttonrow"> 
                            <tr> 
                                <td width="20" align="RIGHT"><input type="button" name="Submit" value="Terminar"></td> 
                            </tr> 
                        </table> 
                    </th> 
                </tr>

3.- En la declaración de tu SCRIPT, donde lo incluyes en la página, has de declarar el tipo de elemento que incluyes

Código PHP:

  <SCRIPT LANGUAGE="JavaScript" SRC="../utilidades/validaciones.js"></SCRIPT>

Debería de quedar asi:

Código PHP:

      <script type="text/javascript" language="javascript" src="../utilidades/validaciones.js"></script>

4.- Las tablas, no tienen como atributo standar la declaración de altura, por lo que debes de declararla dentro del Style de la misma.
Tu código

Código PHP:

  <table width="100%" border="0" cellspacing="0" cellpadding="0" height="32" class="buttonrow">

Debería de quedar así

Código PHP:

                          <table width="100%" border="0" cellspacing="0" cellpadding="0" style="height:32px" class="buttonrow">

Finalmente, posteo el cçodigo, limpio, para que lo uses, y lo mires y veas las diferencias.

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 
<html> 
<head> 
    <title>Validacion</title> 
    <script type="text/javascript" language="javascript" src="../utilidades/validaciones.js"></script> 
</head> 
 
<body bgcolor="#FFFFFF" text="#000000" style="margin:0px;padding:0px"> 
<h1>Alta producto</h1> 
<form action="ProcesarAltaProducto.php" method="post" name="formulario" id="formulario" onSubmit= "return validar_producto(this.formulario)"> 
<table bgcolor="#F0F8FF" width="95%" border="0" cellspacing="0" cellpadding="6" align="center"> 
    <tr> 
        <td valign="top" align="left"> 
            <table width="75%" cellpadding="3" cellspacing="0" border="1"> 
                <tr class="celdaCampoObligatorio"> 
                    <th width="30%" align="right"> <label for="name" accesskey="N">Nombre:</label></th> 
                    <td width="70%"><input type=TEXT name="Nombre" id="Nombre" maxlength=100 size=50></td> 
                </tr> 
                <tr class="celdaCampoObligatorio"> 
                    <th width="30%" align="right"> <label for="field2" accesskey="P">Precio:</label></th> 
                    <td width="70%"><!-- <input type=hidden name="label2" value="Precio"> --><input type=TEXT name="Precio" id="Precio" maxlength=50 size=50></td> 
                </tr> 
                <tr class="celdaCampoNoObligatorio"> 
                    <th width="30%" align="right"> <label for="question" accesskey="Q">Descripcion:</label></th> 
                    <td width="70%"><textarea name="Descripcion" id="Descripcion" rows="10" cols="50"></textarea></td> 
                </tr> 
                <tr class="celdaCampoObligatorio"> 
                    <th width="30%" align="right"> <label for="field2" accesskey="P">Catalogado:</label></th> 
                    <td width="70%"><blockquote><p>Si<input type="radio" name="Catalogado" value="SiCatalog"></p><p>No<input type="radio" name="Catalogado"value="NoCatalog"></p></blockquote></td> 
                </tr> 
                <tr class="celdaCampoNoObligatorio"> 
                    <th width="30%" align="right"> <label for="field2" accesskey="P">Imagen(Introduzca ruta):</label></th> 
                    <td width="70%"><input type=TEXT name="Imagen" id="Imagen" maxlength=50 size=50></td> 
                </tr> 
                <tr> 
                    <th colspan="2"> 
                        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="height:32px" class="buttonrow"> 
                            <tr> 
                                <td width="20" align="RIGHT"><input type="button" name="Submit" value="Terminar"></td> 
                            </tr> 
                        </table> 
                    </th> 
                </tr> 
            </table> 
        </td> 
    </tr> 
    <tr> 
        <td valign="top"><p>&nbsp;</p></td> 
    </tr> 
</table> 
</form> 
</body> 
</html>

Mirados estos detalles, vamos al funcionamiento de tu Script

He visto que hay dos fallos importantes:

1.- El tipo de elemento que tienes para enviar el formulario, es un button, y para que salte el evento de onSubmit, debería ser un input type="submit"

2.- El formulario, en el evento onSubmit, le estás pasando como referencia lo siguiente: this.formulario.
Con eso le estas diciendo "valídame this (this significa yo mismo, el objeto donde estás trabajando) yoMismo.formulario" en resumidas cuentas formulario.formulario... y ese objeto no existe.
Debería de ser this "valídame a mi, a yo, el formulario"

Te pongo todo el código limpio, y espero que te sea útil

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 
<html> 
<head> 
    <title>Validacion</title> 
    <script type="text/javascript" language="javascript" src="../utilidades/validaciones.js"></script> 
</head> 
 
<body bgcolor="#FFFFFF" text="#000000" style="margin:0px;padding:0px"> 
<h1>Alta producto</h1> 
<form action="ProcesarAltaProducto.php" method="post" name="formulario" id="formulario" onSubmit="return(validar_producto(this))"> 
<table bgcolor="#F0F8FF" width="95%" border="0" cellspacing="0" cellpadding="6" align="center"> 
    <tr> 
        <td valign="top" align="left"> 
            <table width="75%" cellpadding="3" cellspacing="0" border="1"> 
                <tr class="celdaCampoObligatorio"> 
                    <th width="30%" align="right"> <label for="name" accesskey="N">Nombre:</label></th> 
                    <td width="70%"><input type=TEXT name="Nombre" id="Nombre" maxlength=100 size=50></td> 
                </tr> 
                <tr class="celdaCampoObligatorio"> 
                    <th width="30%" align="right"> <label for="field2" accesskey="P">Precio:</label></th> 
                    <td width="70%"><!-- <input type=hidden name="label2" value="Precio"> --><input type=TEXT name="Precio" id="Precio" maxlength=50 size=50></td> 
                </tr> 
                <tr class="celdaCampoNoObligatorio"> 
                    <th width="30%" align="right"> <label for="question" accesskey="Q">Descripcion:</label></th> 
                    <td width="70%"><textarea name="Descripcion" id="Descripcion" rows="10" cols="50"></textarea></td> 
                </tr> 
                <tr class="celdaCampoObligatorio"> 
                    <th width="30%" align="right"> <label for="field2" accesskey="P">Catalogado:</label></th> 
                    <td width="70%"><blockquote><p>Si<input type="radio" name="Catalogado" value="SiCatalog"></p><p>No<input type="radio" name="Catalogado"value="NoCatalog"></p></blockquote></td> 
                </tr> 
                <tr class="celdaCampoNoObligatorio"> 
                    <th width="30%" align="right"> <label for="field2" accesskey="P">Imagen(Introduzca ruta):</label></th> 
                    <td width="70%"><input type=TEXT name="Imagen" id="Imagen" maxlength=50 size=50></td> 
                </tr> 
                <tr> 
                    <th colspan="2"> 
                        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="height:32px" class="buttonrow"> 
                            <tr> 
                                <td width="20" align="RIGHT"><input type="submit" name="Submit" value="Terminar"></td> 
                            </tr> 
                        </table> 
                    </th> 
                </tr> 
            </table> 
        </td> 
    </tr> 
    <tr> 
        <td valign="top"><p>&nbsp;</p></td> 
    </tr> 
</table> 
</form> 
</body> 
</html>

Siento mucho haberme explayado tanto, pero creo que había que detallar los errores de concepto.

Si sigues teniendo problemas, no dudes en preguntarnos.

Saludos a tod@s

caricatos · #9 (**permalink**) 24/07/2006, 08:56

Bien el_javi: Te has tomado un tiempo viendo el código y luego respondiendo

La verdad es que un error muy común en temas sobre formularios es obviar los botones submit... y a mi se me ha pasado desde el primer mensaje la carencia de esos botones... (tal vez el poner name="submit" me confundió)

Y poner un atributo name a los botones hace que se envíe una variable que tal vez sea no deseada...

Tal vez haya que preparar un "monográfico sobre formularios"

Saludos

el_javi · #10 (**permalink**) 24/07/2006, 09:15

Hola caricatos.

La verdad que me extrañaba que no hubiera sido suficiente tu contestación, y que no se hubiera resuelto.. por eso decidí mirarlo más a fondo.

Normalmente, cuando contesto, es habiendo comprobado el código que la gente postea... y mirando a fondo vi las cosas que detallé.

Espero no haber sobrecargado una contestación con tato código, ni tanto detalle.

Solo, que espero que así, nuestr@ amig@ Laurentina pueda seguir adelante.

Saludos a los dos, y especialmente a ti, fiel caricatos

Laurentina · #11 (**permalink**) 25/07/2006, 04:21

muchas gracias javi, me ha valido de mucho tu ayuda, ya funciona todo!!! y parece que me he enterao mejor de como va esto!!!
ya estaremos en contacto cuando tenga mas dudas, que seguro que me surgen.

un saludete. muchas gracias.