Problema al enviar un formulario

[tyrula]

Hola a todos, he comprado una plantilla que está en ajax y ya la tengo montada, el problema me viene cuando envio el formulario, que me lo envía bien, pero me lo envía tantas veces como campos tengo. Os dejo el código del form i del ajax por si alguien me puede echar una mano ya que llevo toda la mañana y no consigo dar con ello.

Un saludo y gracias

form.js

(function($){
$.fn.extend({
forms:function(opt){
if(opt===undefined)
opt={}
this.each(function(){
var th=$(this),
data=th.data('forms'),
_={
errorCl:'error',
emptyCl:'empty',
invalidCl:'invalid',
successCl:'success',
successShow:'4000',
mailHandlerURL:'include/formulario.php',
ownerEmail:'[email protected]',
stripHTML:true,
smtpMailServer:'localhost',
targets:'input,textarea',
controls:'a[data-type=reset],a[data-type=submit]',
validate:true,
rx:{
".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
".state":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
".email":{rx:/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i,target:'input'},
".phone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
".message":{rx:/.{20}/,target:'textarea'}
},
preFu:function(){
_.labels.each(function(){
var label=$(this),
inp=$(_.targets,this),
defVal=inp.attr('value'),
trueVal=(function(){
var tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html()
return tmp
})()

trueVal!=defVal
&&inp.val(defVal=trueVal||defVal)
label.data({defVal:defVal})
inp
.bind('focus',function(){
inp.val()==defVal
&&(inp.val(''),_.hideEmptyFu(label),label.removeCl ass(_.invalidCl))
})
.bind('blur',function(){
!inp.val()
?inp.val(defVal)
:(_.isValid(label)
?_.showErrorFu(label)
:_.hideErrorFu(label)),
(_.isEmpty(label)
?_.showEmptyFu(label)
:_.hideEmptyFu(label))
})
.bind('keyup',function(){
label.hasClass(_.invalidCl)
&&_.isValid(label)
?_.showErrorFu(label)
:_.hideErrorFu(label)
})
label.find('.'+_.errorCl+',.'+_.emptyCl).css({disp lay:'block'}).hide()
})
_.success=$('.'+_.successCl,_.form).hide()
},
isValid:function(el){
var ret=true,
empt=_.isEmpty(el)
if(empt)
ret=false,
el.addClass(_.invalidCl)
else
$.each(_.rx,function(k,d){
if(el.is(k))
d.rx.test(el.find(d.target).val())
?(el.removeClass(_.invalidCl),ret=false)
:el.addClass(_.invalidCl)
})
return ret
},
isEmpty:function(el){
var tmp
return (tmp=el.find(_.targets).val())==''||tmp==el.data(' defVal')
},
validateFu:function(){
_.labels.each(function(){
var th=$(this)
_.isEmpty(th)
?_.showEmptyFu(th)
:_.hideEmptyFu(th)
_.isValid(th)
?_.showErrorFu(th)
:_.hideErrorFu(th)
})
},
submitFu:function(){
_.validateFu()
if(!_.form.has('.'+_.invalidCl).length)
$.ajax({
type: "POST",
url:_.mailHandlerURL,
data:{
name:$('.name input',_.form).val()||'nope',
email:$('.email input',_.form).val()||'nope',
phone:$('.phone input',_.form).val()||'nope',
fax:$('.fax input',_.form).val()||'nope',
state:$('.state input',_.form).val()||'nope',
message:$('.message textarea',_.form).val()||'nope',
owner_email:_.ownerEmail,
stripHTML:_.stripHTML
},
success: function(){
_.showFu()
}
})
},
showFu:function(){
_.success.slideDown(function(){
setTimeout(function(){
_.success.slideUp()
_.form.trigger('reset')
},_.successShow)
})
},
controlsFu:function(){
$(_.controls,_.form).each(function(){
var th=$(this)
th
.bind('click',function(){
_.form.trigger(th.data('type'))
return false
})
})
},
showErrorFu:function(label){
label.find('.'+_.errorCl).slideDown()
},
hideErrorFu:function(label){
label.find('.'+_.errorCl).slideUp()
},
showEmptyFu:function(label){
label.find('.'+_.emptyCl).slideDown()
_.hideErrorFu(label)
},
hideEmptyFu:function(label){
label.find('.'+_.emptyCl).slideUp()
},
init:function(){
_.form=this
_.labels=$('label',_.form)

_.preFu()

_.controlsFu()
_.form
.bind('submit',function(){
if(_.validate){
_.submitFu()
}
else
_.form[0].submit()
return false

})
.bind('reset',function(){
_.labels.removeClass(_.invalidCl)
_.labels.each(function(){
var th=$(this)
_.hideErrorFu(th)
_.hideEmptyFu(th)
})
})
_.form.trigger('reset')
}
}
if(!data)
(typeof opt=='object'?$.extend(_,opt):_).init.call(th),
th.data({cScroll:_}),
data=_
else
_=typeof opt=='object'?$.extend(data,opt):data
})
return this
}
})
})(jQuery)
$(window).load(function() {
$('#ContactForm').forms({
ownerEmail:'#'
})
})

Aquí es donde veo que llama al enviar pero no se porque lo hace 4 veces!!!

.bind('submit',function(){
if(_.validate){
_.submitFu()
}
else
_.form[0].submit()
return false

})

Y este es el formulario:

<form action="#" id="ContactForm">
<!-- <form id="ContactForm" name="form1" method="post" action="include/formulario.php" enctype="multipart/form-data"> -->
<div class="success"> Formulario enviado<br>
<strong>Estaremos en contacto muy pronto.</strong> </div>
<fieldset>
<div class="wrapper">
<div class="col1">
<div class="wrapper">
<label class="name">
Nombre:<br>
<input type="text" value="" class="input">
<span class="error">*No es un nombre válido.</span>
<span class="empty">*Campo obligatorio.</span> </label>
</div>
<div class="wrapper">
<label class="email">
E-mail:<br>
<input type="text" value="" class="input">
<span class="error">*Dirección de mail no válida.</span>
<span class="empty">*Campo obligatorio.</span> </label>
</div>
<div class="wrapper">
<label class="phone">
Teléfono:<br>
<input type="tel" value="" class="input">
<span class="error">*Teléfono no válido.</span>
<span class="empty">*Campo obligatorio.</span> </label>
</div>
</div>
<div class="col2">
<label class="message">
Mensaje:<br>
<textarea rows="1" cols="1"></textarea>
<span class="error">*El mensaje es demasiado corto.</span>
<span class="empty">*Campo obligatorio.</span> </label>
</div>
</div>
<div class="btns"><a href="#" class="button1" data-type="submit"><strong></strong><span>enviar</span></a><a href="#" class="button1" data-type="reset"><strong></strong><span>borrar</span></a></div>
</fieldset>
</form>

gracias, gracias, gracias

[Lynxcraft]

el problema es success utiliza done y fail

[tyrula]

Hola Lynxcraft, no se mucho de ajax... me puedes ayudar un poco? esto de success y fail lo tengo queponer en

.bind('submit',function(){
if(_.validate){
_.submitFu()
}
else
_.form[0].submit()
return false

})

??

Si me puedieses ayudar un poco.... tendría que poner algo así?

if(done(_.validate)){
_submitFu()
}

Mil gracias!!!!

[Lynxcraft]

te combiene mas esto

http://docs.jquery.com/Plugins/Validation

[tyrula]

Ok, probaré a hacer esto a ver si me aclaro. Ya te digo. gracias!

[tyrula]

Hola, en el ejemplo descargado parece que funciona esto del validador, pero no se donde está lo del envío del form... puedes ayudarme? como te he comentado soy un poco novata en esto :| Gracias

Por lo que veo le pasa a la misma página los parámetros, pero yo quiero que se los pase a una página en php y que después la página principal me recoja los valores.

[tyrula]

Me estoy volviendo loca!! me he descargado este ejemplo y me funciona perfecto pero como en mi página utilizo la versión jquery 1.6 pues con esta no me funciona!! Ya no se que hacer... necesito ayuda!!!

Esto es lo que me he descargado:

<!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" />
<script type="text/javascript" src="js/jquery-1.6.pack.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>

<style>
*{margin:0;padding:0;}
body {background:#FFF;font-family: Tahoma,tahoma,sans-serif,Arial,Tahoma,Verdana; font-size: 11px; color: #666;background:url(base2.gif) top center no-repeat}
form {width:700px;height:520px;display:inline;float:lef t;margin:20px 0 0 0}

#pie {float:left;display:inline;width:670px;margin:0 15px;text-align:justify;padding:0 0 15px 0}

a {color: #a10052;text-decoration:none;margin:0;border:0;font-weight:bold;}
label { color: #000; font-size: 1em; line-height: 140%; margin: 10px 0 .2em 90px; display: block; }
input.textField { width: 350px; color: #000; font-size: 1.1em; padding: 4px; background: #fff; border: 1px solid #999; margin: 0 0 20px 0; display: inline;margin: 0 0 .2em 90px; }
textarea.textArea { width: 500px; height: 150px; color: #000; font-family: Tahoma,tahoma,sans-serif,Arial,Tahoma,Verdana;font-size: 1em; padding: 4px; background: #fff; border: 1px solid #999; margin: 0 0 .2em 90px; overflow: auto; }
.error-message, label.error { color: #a10052; margin: 0 0 .5em 90px; display: block; font-size: 1em !important;font-weight:bold; }
/* para controlar el spam en formularios */
#messageLabel { display: none !important; }
#message { display: none !important; }


</style>

</head>

<body>
<form id="frmContact">
<fieldset style="display:none;"><input type="hidden" name="_method" value="POST" /></fieldset>
<label for="ContactName">NOMBRE</label><input name="data[Contact][name]" type="text" class="textField" maxlength="255" value="" id="ContactName" />
<label for="ContactRecipient">CORREO ELECTRÓNICO</label><input name="data[Contact][recipient]" type="text" class="textField " value="" id="ContactRecipient" />
<label for="ContactPhone">TELÉFONO</label><input name="data[Contact][phone]" type="text" class="textField" maxlength="255" value="" id="ContactPhone" />
<label for="ContactMessage">MENSAJE / CONSULTA</label><textarea name="data[Contact][message]" cols="5" rows="3" class="textArea" id="ContactMessage" ></textarea>
<input type="image" src="enviar.png" alt="Enviar" style="margin: 10px 0 .2em 86px;" />
<p style='margin:10px 0 0 80px' id="mensaje"></p></form>

<script type="text/javascript"><!--
$(document).ready(function(){
$("#frmContact").validate({
event: "blur",
rules: {
'data[Contact][name]': "required",
'data[Contact][recipient]': { required: true, email: true },
'data[Contact][message]': "required"
},
messages: {
'data[Contact][name]': "Por favor ingrese su nombre",
'data[Contact][recipient]': "Ingrese una dirección de e-mail válida",
'data[Contact][message]': "Por favor, ingrese su mensaje o consulta"
},

debug: true,
errorElement: "label",
errorContainer: $("#errores"),
submitHandler: function(form){

$.ajax({

type: "GET",
url:"envio.php",
contentType: "application/x-www-form-urlencoded",
processData: false,
data: "nombre="+$('#ContactName').val()+"&email="+$('#Co ntactRecipient').val()+"&telefono="+$('#ContactPho ne').val()+"&comentario="+$('#ContactMessage').val (),
success: function(msg){
//if(msg==1){
$("#mensaje").html("<strong>El mensaje se ha enviado correctamente!</strong>");
//}
}
});
}
});
});
//--></script>
</body>
</html>

[Lynxcraft]

perdona por no contestar antes
debería funcionar cualquier versión de jquery de todos modos el 1.6.pak no se de donde lo has sacado bájate la versión 1.7 de la pagina principal

http://jquery.com/

no debería afectar a las funciones que tengas