Estoy tratando de usar el complemento de validación jquery para validar un formulario y enviar los contenidos con una solicitud ajax.
Este código está en el encabezado de mi documento.
$(document).ready(function() { $('#contact-form').validate({submitHandler: function(form) { $(form).ajaxSubmit(); contactSuccess() ; } }); });La validación funciona. Sin embargo, el envío se realiza con normalidad: al enviar, la página se recarga. Por supuesto, tengo un comportamiento alternativo que no es js para navegadores que no tienen js habilitado. Pero me gustaría que la experiencia de usuario sea más fluida.
El error que veo en firebug es: $(formulario).ajaxSubmit no es una función
¿Qué podría estar haciendo mal aquí?
Supongo que no tiene un complemento de formulario jquery incluido. ajaxSubmit no es una función central de jquery, creo.
Algo como esto: http://jquery.malsup.com/form/
UPD
<script src="http://malsup.github.com/jquery.form.js"></script>esta es una función nueva, por lo que debe agregar otro archivo lib después de jQuery lib
<script src="http://malsup.github.com/jquery.form.js"></script>funcionará... lo he probado... espero que funcione para ti...
Ajax Envíe el formulario sin actualizar la página utilizando el método jquery ajax, primero incluya la biblioteca jquery.js y jquery-form.js y luego cree el formulario en html:
<form action="postpage.php" method="POST" id="postForm" > <div id="flash_success"></div> name: <input type="text" name="name" /> password: <input type="password" name="pass" /> Email: <input type="text" name="email" /> <input type="submit" name="btn" value="Submit" /> </form> <script> var options = { target: '#flash_success', // your response show in this ID beforeSubmit: callValidationFunction, success: YourResponseFunction }; // bind to the form's submit event jQuery('#postForm').submit(function() { jQuery(this).ajaxSubmit(options); return false; }); }); function callValidationFunction() { // validation code for your form HERE } function YourResponseFunction(responseText, statusText, xhr, $form) { if(responseText=='success') { $('#flash_success').html('Your Success Message Here!!!'); $('body,html').animate({scrollTop: 0}, 800); }else { $('#flash_success').html('Error Msg Here'); } } </script>