problemilla con submit

ocbarrio · 14 Sep 2012, 14:45 · Solicitar retirada

Hola! tengo un problemilla con el submit. Quiero que no haga submit hasta que no esten completos los 4 campos, pero aunque el script de validacion funciona (aparece el mensaje "falta campo x") envia el formulario igualmente al aceptar (aceptar el mensaje "falta campo x").

CODIGO HTML

<div id="container">

<form id="form1" class="wufoo" action="../enviar.php" method="post" name="formulario">

<div class="info">
<h2>Contacto</h2>
</div>

<ul>

<li>
<label class="desc" > Nombre:<span class="req">*</span></label>
<div>
<input class="field text large" name="nombre" type="text" id="nombre" maxlength="255" />
</div>
</li>

<li>
<label class="desc">E-mail:<span class="req">*</span></label>
<div>
<input class="field text large" name="email" id="email" type="text" maxlength="255"/>
</div>
</li>

<li>
<label class="desc">Asunto:<span class="req">*</span></label>
<div>
<input class="field text large" name="asunto" id="asunto" type="text" maxlength="255"/>
</div>
</li>

<li>
<label class="desc">Mensaje:<span class="req">*</span></label>
<div>
<textarea rows="10" cols="50" class="field textarea medium" name="mensaje" id="mensaje"></textarea>
</div>
</li>

<li class="buttons">
<input name="button" type="submit" class="btTxt" id="saveForm" value="Enviar" onclick="valida_envia()"/>
</li>
</ul>

</form>

<script language="JavaScript" type="text/JavaScript">

function valida_envia(){
if(document.formulario.nombre.value == "") {
alert("Escriba su nombre");
document.formulario.nombre.focus();
return 0;
}

if(document.formulario.email.value == "") {
alert("Escriba su EMail");
document.formulario.email.focus();
return 0;
}

if(document.formulario.asunto.value == "") {
alert("Escriba el asunto");
document.formulario.asunto.focus();
return 0;
}

if(document.formulario.mensaje.value == "") {
alert("Escriba el mensaje");
document.formulario.mensaje.focus();
return 0;
}

if(document.formulario.nombre.focus().false) {document.formulario.submit();}

if(document.formulario.email.focus().false) {document.formulario.submit();}

if(document.formulario.asunto.focus().false) {document.formulario.submit();}

if(document.formulario.mensaje.focus().false) {document.formulario.submit();}

return true
;
}
</script>

Lo que esta en rojo son pruebas que e ido haciendo viendo el codigo (no tengo ni idea de php ni js). Antes de "return true" iba esto: "document.formulario.submit();"

CODIGO PHP

....
<script languaje="JavaScript">
function redireccionar() {
setTimeout("location.href='index.html?id=tw_redireccion'", 5000);
}
</SCRIPT>
</head>

<body onload="redireccionar()">
....
<?php
$mail='[correo eliminado]';
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$asunto = $_POST['asunto'];
$mensaje = $_POST['mensaje'];

$nombre = strip_tags ($nombre);
$email = strip_tags ($email);
$asunto = strip_tags ($asunto);
$mensaje = strip_tags ($mensaje);

$message = "
Nombre: ".$nombre."
E-mail: ".$email."
Asunto: ".$asunto."
Mensaje: ".$mensaje."";

if (mail($mail,"Fotografía Olivier",$message ,"From: $email"));

echo "Gracias, se ha enviado correctamente.
Si no se carga la página principal en 5 seg. pulse sobre la imagen para volver.";

?>

MUCHAS GRACIAS!

skaparate · 14 Sep 2012, 19:12 · Solicitar retirada

Hola:

Incluye jQuery (para facilitar el trabajo). Escribe esto dentro del <head></head>:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function($) {
    $('#form1').submit(e) {
      e.preventDefault();
      
      if(valida_envia($) == 1)
        $(this).submit();
    }
  });

function valida_envia($){
	if($('#nombre').val() == "") {
		alert("Escriba su nombre");
		$('#form1 #nombre').focus();
		
		return 0;
	}

	if($('#email').val() == "") {
		alert("Escriba su EMail");
		$('#form1 #email').focus();
		
		return 0;
	}


	if($('#asunto').val() == "") {
		alert("Escriba el asunto");
		$('#form1 #asunto').focus();
		
		return 0;
	}

	if($('#mensaje').val() == "") {
		alert("Escriba el mensaje");
		$('#form1 #mensaje').focus();
		
		return 0;
	}

        return 1;
}</script>

Eso es todo. Ya no necesitas el código anterior. No lo he probado, así que si no funciona me avisas.

ocbarrio · 14 Sep 2012, 20:14 · Solicitar retirada

Hola y muchas gracias!

Me da un error de sintaxis en la linea:

$('#form1').submit(e) {

Aparte de eso lo he probado y hace exactamente igual, envia el formulario aunque hayan campos vacios (eso si, antes de enviar me avisa del campo vacio).

He quitado todo el codigo js de antes, y he colocado el tuyo. Que puñeta esto del JS, o te pones las pilas o no pillas nada.

Muchisimas gracias!

Yaneth · 14 Sep 2012, 20:54 · Solicitar retirada

Hola, tienes esto:

<input name="button" type="submit" class="btTxt" id="saveForm" value="Enviar" onclick="valida_envia()"/>

cambialo por esto:

<input type="button" value="Enviar" onclick="valida_envia()" />

Lo que hice fué, quitar el boton submit que es el que envia el formulario
de esa forma, ese boton ya no funciona, lo que hace es que, al darle enviar
manda los datos al script, y una vez estén todos los campos completos,
el mismo escritp tiene el submit (enviar)

if(document.frm.email.value == "") {
alert("Por favor indica un Mensaje");
document.frm.email2.focus();
return 0;
}

alert("Muchas gracias por enviar el formulario");
document.frm.submit();
return true;
}
</script>

saludos

skaparate · 14 Sep 2012, 21:16 · Solicitar retirada

Claro que te da error, pues me equivoqué XD. Lo siento. El código correcto es este:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function($) {
    $('#form1').submit(function(e) {
      e.preventDefault();
      
      if(valida_envia($) == 1)
        $(this).submit();
    });
  });

function valida_envia($){
	if($('#nombre').val() == "") {
		alert("Escriba su nombre");
		$('#form1 #nombre').focus();
		
		return 0;
	}

	if($('#email').val() == "") {
		alert("Escriba su EMail");
		$('#form1 #email').focus();
		
		return 0;
	}


	if($('#asunto').val() == "") {
		alert("Escriba el asunto");
		$('#form1 #asunto').focus();
		
		return 0;
	}

	if($('#mensaje').val() == "") {
		alert("Escriba el mensaje");
		$('#form1 #mensaje').focus();
		
		return 0;
	}

        return 1;
}</script>

ocbarrio · 14 Sep 2012, 21:37 · Solicitar retirada

Hola skaparate!

Ante todo un gracias enorme!

Por fin funciona, aunque ahora tengo el problema que el boton "enviar" se queda en gris oscuro (no se puede apretar despues de introducir el campo que falta.

Alguna idea?

ocbarrio · 14 Sep 2012, 21:53 · Solicitar retirada

Hola Yaneth!

Que grande eres! Por fin funciona exactamente como queria. Que sepas que el resto del codigo es tuyo tambien, de otro post.

Muchisimas gracias a los 2 por vuestra ayuda!

Un saludo!

P.D. Si necesitais saber algo de photoshop, premiere, after effects o 3d studio max, por favor hacermelo saber y os ayudare encantado.

Yaneth · 15 Sep 2012, 06:09 · Solicitar retirada

hola ocbarrio. me alegra que lo hayas solucionado
yy, el codigo no es mio, lo que hice fuè tomar varios de la red y adaptarlo a mi gusto jeje

y gracias por tu ofrecimiento, lo tendrè en cuena

saludos y suerte!!

skaparate · 15 Sep 2012, 18:16 · Solicitar retirada

Lo mismo digo, gracias por la oferta :D.