$ (formulario) .ajaxEnviar no es una función

Question

Estoy tratando de usar el complemento jquery validate para validar un formulario y enviar los contenidos con una solicitud ajax.

Este código está en la parte superior de mi documento.

$(document).ready(function() { 
    $('#contact-form').validate({submitHandler: function(form) { 
     $(form).ajaxSubmit(); 
     contactSuccess() ; 
     } 
    }); 
}); 

La validación funciona. Sin embargo, la presentación se realiza normalmente: al enviarla, la página se vuelve a cargar. Por supuesto, tengo un comportamiento alternativo de no js para los 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: $ (forma) .ajaxSubmit no es una función

Qué podría estar haciendo mal aquí?

Answer 1

Supongo que no tiene un complemento de formulario jquery incluido. ajaxSubmit no es una función básica de jquery, creo.

Algo como esto: http://jquery.malsup.com/form/

Answer 2

creo que quiere hacer $ (este) .ajaxSubmit(); ... Además, tome nota de lo que el ejemplo de la function documentation dice:

// attach handler to form's submit event 
$('#myFormId').submit(function() { 
    // submit the form 
    $(this).ajaxSubmit(); 
    // return false to prevent normal browser submit and page navigation 
    return false; 
}); 

- es decir, se dice que es necesario return false; para evitar el envío normal del navegador.

Answer 3

$(form).ajaxSubmit(); 

desencadena otra validación resultante de una recursión. intente cambiarlo a

form.ajaxSubmit(); 

Answer 4

Probar ajaxsubmit biblioteca. Hace una submezcla de ajax así como validación a través de ajax.

También la configuración es muy flexible para admitir cualquier tipo de interfaz de usuario.

Live demo available con ejemplos de js, css y html.

Answer 5

Ajax Envíe el formulario de actualización de la página con el cabo mediante el método ajax jquery primer incluir jquery.js biblioteca y jquery-form.js continuación, crear la forma 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> 

Answer 6

Probar:

$(document).ready(function() { 
    $('#contact-form').validate({submitHandler: function(form) { 
     var data = $('#contact-form').serialize(); 
     $.post(
       'url_request', 
       {data: data}, 
       function(response){ 
        console.log(response); 
       } 
     ); 
     } 
    }); 
}); 

Answer 7

esta es una nueva función, por lo que debe agregar otro archivo lib después de jQuery lib

<script src="http://malsup.github.com/jquery.form.js"></script> 

funcionará .. He probado .. espero que va a trabajar para usted ..

Answer 8

Drupal 8

Drupal 8 no incluye JS-bibliotecas a páginas automaticamente. Por lo tanto, lo más probable es que si cumple este error, debe adjuntar la biblioteca 'core/jquery.form' a su página (o formulario).Agregue algo como esto a su matriz de procesamiento:

$form['#attached']['library'][] = 'core/jquery.form';