Tengo un problemilla con un formulario que valida con jQuery.....lo conseguí ya programado y anda de mil maravillas...el problema radica cuando saco los estilos (style) del html y los coloco en un archivo .css, por mas que vincule el html al css no valida, manda directamente el mail sin la validación. O sea, se rompe totalmente el javascript. Que estoy haciendo mal? por que se rompe??
quiero utilizar el archivo .css vinculado así puedo continuar con los estilos de la pagina que este realizando. No suelo utilizar el syle en el mismo html.
Aqui les dejo el codigo html
Código HTML:
<!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.2.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:left;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="+$('#ContactRecipient').val()+"&telefono="+$('#ContactPhone').val()+"&comentario="+$('#ContactMessage').val(), success: function(msg){ //if(msg==1){ $("#mensaje").html("<strong>El mensaje se ha enviado correctamente!</strong>"); //} } }); } }); }); //--></script> </body> </html>
