Validar form clickando input image

[AbdelioR]

Buenas, pues tengo un script en js que valida los campos de un formulario, para ver si estan rellenos o no. Si el formulario se envia a través de un botón funciona perfectamente, el problema es cuando el botón es una imagen:

Código HTML:

 <input onclick="MM_validateForm('theme','','R','preview','','R','nombre','','R');return document.MM_returnValue" name="enviar" type="image" src="upload.gif" border="0" style="cursor:pointer"/> 

El form tiene esto:

Código HTML:

<form name="alojar" method="post" action="url/upload.php" style="margin:0px;" enctype="multipart/form-data"> 

Entonces no pasa nada... alguien sabe cual es la manera correcta para que esto funcione?

Gracias.

[Panino5001]

Hay 2 caminos:
El menos recomendable (porque si js no está activado no se submitirá el form, igual a lo que tenés ahora con el input type button), es colocar la imagen como una imagen normal (img src="algo.jpg" en lugar de input type image) y agregarle un evento onclick que dispare el llamado a la función de validación.
El segundo es validar con el evento onsubmit del tag form:
<form onsubmit="return validar()">
Pero en este caso tendrás que modificar tu función de validación para que retorne true o false (true para submitir, false para no hacerlo), y eliminar el document.nombredeformulario.submit(); que seguro tendrás en esa función de validación.

[AbdelioR]

La función es una predeterminada de DreamWeaver:

Código HTML:

function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' es un campo obligatorio.\n'; }
  } if (errors) alert('Los datos no son correctos:\n'+errors);
  document.MM_returnValue = (errors == '');

Si pongo una imagen normal, le añado el evento onclick(validar) y que el validar envie o no el form, tendria que funcionar?

[Panino5001]

No, porque en ningún lugar se submite el formulario. Esa función está creada para ser usada en el evento onsubmit del formulario:

Código:

<form onsubmit="MM_validateForm('theme','','R','preview','','R','nombre','','R'); return document.MM_returnValue;">
<!--lo que siga-->

Y ahí sí podés usar un input type image o un botón tipo submit, ambos sin un onclick (que es lo más correcto).

[caricatos]

Hola:

Las validaciones con una imagen son como si se tratara de un botón submit, ya que las imágenes también hacen submit, aunque agregándo a los parámetros las coordenadas de donde se pulsa...

De todos modos podrías animarte a hacer tu propia validación... yo añadiría a lo que puso Panino5001 (¡Hola !) el propio formulario como parámetro de la función porque ayuda a reutilizar el código...

<form onsubmit="return validar(this)"...

Si te animas, aquípodemos ayudarte.

Saludos

[AbdelioR]

Mm.. me hago la idea, pero tengo 2 acciones, una la validación de los campos, y otra la propia acción del formulario, que solo se hará si los campos se validan, que es esta:

action="url/includes/upload_basic.php"

Entonces donde tengo que colocar cada una? si en action del form pongo la validación de campos, esta donde va?

[Panino5001]

Así:

Código PHP:

  <form name="alojar" method="post" action="url/upload.php" style="margin:0px;" enctype="multipart/form-data" onsubmit="MM_validateForm('theme','','R','preview','','R','nombre','','R'); return document.MM_returnValue;">  
   

[AbdelioR]

MM.. así no ocurre nada, lo mismo que antes; el formulario se procesa tal cual. Se supone que con el onsubmit, se procesa el retorno de la función js y dependiendo de lo que ocurra se procesa o no el formulario? es que no salta ninguna alerta ni nada que es lo que tendria que pasar al estar los campos vacios.

[Panino5001]

Quizá tengas un error con los nombres de tus campos. Posteá el código de tu formulario, indicando cuál/es campo/s necesitás validar.

[AbdelioR]

El form es este:

Código HTML:

<form name="alojar" method="post" action="http://url/includes/upload_basic.php" style="margin:0px;" enctype="multipart/form-data" onsubmit="MM_validateForm('theme','','R','preview','','R','nombre','','R'); return document.MM_returnValue;">  

    <table width="770" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="400" height="20" align="left">Imagen preview: </td>
        <td width="30" align="left">&nbsp;</td>
        <td align="left">Nombre:</td>
        <td align="left">&nbsp;</td>
      </tr>
      <tr>
        <td height="20" align="left"><input name="preview" type="file" size="40" /></td>
        <td align="left">&nbsp;</td>
        <td align="left"><input name="nombre" type="text" size="25" /></td>
        <td align="left">&nbsp;</td>
      </tr>
      <tr>
        <td height="30" align="left" valign="bottom">Theme:</td>
        <td align="left">&nbsp;</td>
        <td align="left" valign="bottom">&nbsp;</td>
        <td align="left" valign="bottom">&nbsp;</td>
      </tr>
      <tr>
        <td align="left"><input name="theme" type="file" size="40" /></td>
        <td colspan="2" rowspan="2" align="left"><span style="text-align:center; margin:10px;">
          <input name="enviar" type="image" src="http://url/media/images/formulario/upload.gif" border="0" style="cursor:pointer"/>
        </span></td>
        <td align="left" valign="bottom">&nbsp;</td>
      </tr>
      <tr>
        <td align="left">&nbsp;</td>
        <td align="left" valign="bottom">&nbsp;</td>
      </tr>
    </table>
  </form> 

Quiero validarlos todos (nombre, theme y preview) entonces el js de validacion es el de DW, que es el que puse más arriba.

[Panino5001]

Usando las funciones de macromedia sería así:

Código PHP:

  <!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) alert('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
}
//-->
</script>
</head>

<body>
<form name="alojar" method="post" action="http://url/includes/upload_basic.php" style="margin:0px;" enctype="multipart/form-data" onsubmit="MM_validateForm('theme','','R','preview','','R','nombre','','R'); return document.MM_returnValue;">  

    <table width="770" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="400" height="20" align="left">Imagen preview: </td>
        <td width="30" align="left">&nbsp;</td>
        <td align="left">Nombre:</td>
        <td align="left">&nbsp;</td>
      </tr>
      <tr>
        <td height="20" align="left"><input name="preview" type="file" size="40" /></td>
        <td align="left">&nbsp;</td>
        <td align="left"><input name="nombre" type="text" size="25" /></td>
        <td align="left">&nbsp;</td>
      </tr>
      <tr>
        <td height="30" align="left" valign="bottom">Theme:</td>
        <td align="left">&nbsp;</td>
        <td align="left" valign="bottom">&nbsp;</td>
        <td align="left" valign="bottom">&nbsp;</td>
      </tr>
      <tr>
        <td align="left"><input name="theme" type="file" size="40" /></td>
        <td colspan="2" rowspan="2" align="left"><span style="text-align:center; margin:10px;">
          <input name="enviar" type="image" style="cursor:pointer"  src="http://url/media/images/formulario/upload.gif" border="0"/>
        </span></td>
        <td align="left" valign="bottom">&nbsp;</td>
      </tr>
      <tr>
        <td align="left">&nbsp;</td>
        <td align="left" valign="bottom">&nbsp;</td>
      </tr>
    </table>
  </form></body>
</html>  
  

[AbdelioR]

Si, así lo tengo pero no funciona. ¿A ti te va tal cual?

[Panino5001]

Sí, así tal cual me funciona en Ópera, Firefox y Explorer. Probá tal cual lo posteé. Si te funciona ya sabés que el problema estará en otro lado de tu página.

[AbdelioR]

¡Perfecto! si que funciona, la verdad que he mirado el código y aparentemente era el mismo :S pero bueno, ya va. Muchas gracias por la ayuda :)