Validar campos con type="image"

[Potro]

Hola mis estimados tengo el siguiente problemilla.

Resulta que tengo un formulario que valido con lo siguiente..


********************

<script LANGUAGE="JavaScript">

function Validar(form)
{
if (form.nombre.value == "")
{ alert("Favor de ingresar su nombre"); form.nombre.focus(); return; }

if (form.apellidos.value == "")
{ alert("Favor de ingresar sus apellidos"); form.apellidos.focus(); return; }

if (form.empresa.value == "")
{ alert("Favor de ingresar el nombre de su empresa"); form.empresa.focus(); return; }

form.submit();
}

</script>


y el boton es el siguiete:

<input name="button" type="button" onClick="Validar(this.form)" value="Entrar">


**************************************

Esto me sirve de maravilla me valida muy bien los campos pero me han solicitado que no sea un boton comun que mejor sea una imagen y lo he sustituido por lo siguiente:


**************************************

<input type="image" src="img/contacto_enviar.gif" onClick="Validar(this.form)">

**************************************


y aquí viene el problema ya no me funciona tambien como el otro, al darle clic me dice que falta el nombre y al darle aceptar se refresca la página, como le puedo hacer para que me jale = que el otro boton espero su ayuda mil gracias...

[derkenuke]

Hola Potro:

Cuando haces click en un input type="image" el formulario se envía con las coordenadas donde hiciste click, así que igual te ahorras problemas si es una imagen normal <img>, que al hacerle click ejecuta el Validar(). Luego le das el CSS que quieras para que parezca un enlace.

También puedes meter una imagen en un elemento <button>, pero no sé hasta qué punto conseguirás que sea agradable a la vista con CSS.


Un saludo

[caricatos]

Hola:

Pues sí, los type="image" hacen submit, y si no te importa que se envíen las coordenadas, podrías hacer las validaciones normales sin asociar nada a ningún evento de esa imagen (sin onclick) y validando desde el tag form... con el evento submit y añadirle a ese return false que es la mejor forma de validar...

<form onsubmit="return validar(this)" ...
<input type="image" src="img/contacto_enviar.gif" >

y la validación de este tipo:
if (form.nombre.value == "")
{ alert("Favor de ingresar su nombre"); form.nombre.focus(); return false; }

de esa manera tu formulario pasa a ser "accesible" (tal como lo tienes se considera inaccesible, ya que quien tenga javascript desactivado, jamás enviará el form)

Por cierto que si lo haces "accesible", deberías a la vez validar en el servidor (es lo que siempre aconsejo)..

Sobre usar la imagen en un botón, basta con poner estilos de esta manera:
<button type="submit" style="margin: 0; padding: 0; border: 0; background-color: transparent"><img src="submit.gif" alt="submit" /></button>
De esa manera no se enviarían las coordenadas... y si en vez de ser tipo submit lo haces de tipo button, podrías seguir usando tu sistema de validación (insisto en que no es el adecuado)

Saludos

[Potro]

Mil gracias derkenuke y caricatos sus explicaciones y ejemplos me sirvierón mucho y ahora entiendo la importancia de hacer un buen codigo...

Gracias y saludos...