Pongamos un ejemplo:
Pagina principal
Código HTML :
<body> <div id="ajax"></div> </body> </html>
Página que carga por Load
Código HTML :
<div id="contact" class="corner-5"> <a class="handle" href="mailto%3Aelan%40trybuch.com">Content</a> <form id="contact-form" method="post"> <input class="input required error" type="text" name="fullName" title="What shall I call you?"/> <input class="input required error" type="text" name="email" title="[email protected]"/> <input class="input required error" type="text" name="subject" title="Topic of conversation"/> <textarea class="txt-input required error" name="message" rows="6"></textarea> <input class="submit" type="submit" name="submit" value="submit"/> </form> <div id="sent">Sucess</div> </div>
JQUERY en la página principal
Código Javascript :
$(document).ready(function(){
$("#ajax").load("ajax.php")
$("#contact-form").validate({
rules: {
fullName: { //input name: fullName
required: true, //required boolean: true/false
minlength: 5,
},
email: { //input name: email
required: true, //required boolean: true/false
email: true //required boolean: true/false
},
subject: { //input name: subject
required: true, //required boolean: true/false
minlength: 5
},
message: { //input name: message
required: true,
minlength: 1
}
},
messages: { //messages to appear on error
fullName: {
required:"Please put your full name.",
minlength:"C'mon full name please."
},
email: "Enter a valid email.",
subject: {
required: "Whats the topic?",
minlength: ""
},
message: {
required: "What did you want to say?",
minlength: "Please complete your thoughts, then submit."
}
},
/*submitHandler: function(form) {
$(form).ajaxSubmit({
url:"echo/html",
type:"GET",
success: function(){
alert('inside');
$('#contact-form').hide();
$('#sent').show();
}
});
}*/
});
})
Hoja de estilo para ponerlo bonito
Código CSS :
#contact{
padding: 20px;
width: 250px;
background: #FFF;
border: 1px solid #29216d;
position: static;
margin-top:50px;
position: fixed;
z-index: 200;
}
.txt-input,
.input{
color:#aaa;
margin: 3px 0;
font-family: Helvetica;
font-size: 11px;
}
.txt-input{
width: 250px;
}
.input{
width: 200px;
}
.txt-input:focus,
.input:focus{
color:#000;
}
label.error{
float: left;
font-size: 10px;
font-weight: bold;
color:#F0F;
}
.submit{
margin-top:20px;
display: block;
}
#sent{
display:none;
}
La historia es que sin usar load y metiendo todo el contenido en una sola página (a lo tradicional) todo funciona perfectamente, pero claro, mi pagina necesita cargarse así ya que todas las secciones anteriores se han ido cargando de esta forma (con la típica animación de carga etc etc). PUES NO HAY MANERA! en cuanto lo intento así el plugin parece dejar de funcionar y no verifíca y hace el submit pasando completamente de todo.
Espero que me podais ayudar o dar unas pistas porque ya tengo un dolor de cabeza descomunal
Gracias!
