errorelement - jquery validation rules

$(form).ajaxSubmit no es una función

Question

Intento usar el complemento jquery validate para validar un formulario y enviar los contenidos con una solicitud de 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, la presentación se hace normalmente: en el momento de la presentación, la página se vuelve a cargar. Por supuesto, tengo un comportamiento alternativo de no js para navegadores que no tienen habilitado js. Pero me gustaría que la experiencia de usuario sea más fluida.

El error que veo en firebug es: $ (form) .ajaxSubmit no es una función

¿Qué podría estar haciendo mal aquí?

Answer 1

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>

Answer 2

Creo que quieres hacer $ (this) .ajaxSubmit (); ... también, tome nota de lo que dice el ejemplo de la http://jquery.malsup.com/form/ de la http://jquery.malsup.com/form/ :

// 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, dice que debe devolver falso; para evitar el envío normal del navegador

Answer 3

Pruebe la biblioteca ajaxsubmit . Hace la sumisión ajax así como la validación a través de ajax.

Además, la configuración es muy flexible para admitir cualquier tipo de interfaz de usuario.

Demostración en vivo disponible con ejemplos js, css y html.

Answer 4

Supongo que no tienes 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/

UPD

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

Answer 5

Tratar:

$(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 6

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á ... lo he probado ... espero que funcione para usted ..

Answer 7

Drupal 8

Drupal 8 no incluye bibliotecas JS en las páginas de forma automática. 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 renderizado:

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

Answer 8

$(form).ajaxSubmit(); 

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

form.ajaxSubmit();