web-dev-qa-db-fra.com

$ (formulaire) .ajaxSubmit n'est pas une fonction

J'essaie d'utiliser le plugin jquery validate pour valider un formulaire et soumettre le contenu avec une demande ajax.

Ce code est dans la tête de mon document.

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

La validation fonctionne. Cependant, la soumission est faite normalement: Lors de la soumission, la page est rechargée. Bien sûr, j’ai un comportement de secours non js pour les navigateurs sur lesquels js n'est pas activé. Mais j'aimerais que l'expérience utilisateur soit plus fluide.

L'erreur que je vois dans firebug est la suivante: $ (formulaire) .ajaxSubmit n'est pas une fonction

Que pourrais-je faire de mal ici?

jqueryvalidation
38
Bob Dobbs

Je suppose que vous n'avez pas de plugin de formulaire jQuery inclus. ajaxSubmit n'est pas une fonction de base de jquery, je crois.

Quelque chose comme ceci: http://jquery.malsup.com/form/

[~ # ~] upd [~ # ~] 

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

c'est une nouvelle fonction donc vous devez ajouter un autre fichier lib après jQuery lib

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

cela fonctionnera .. j'ai testé .. espérons que cela fonctionnera pour vous ..

6
Sandeep Kapil

Ajax Soumettez le formulaire sans actualiser la page en utilisant la méthode jquery ajax, commencez par inclure la bibliothèque jquery.js et jquery-form.js, puis créez le formulaire au format 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>
3
Vishnu Sharma

Essayer:

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

Drupal 8

Drupal 8 n'inclut pas automatiquement les bibliothèques JS dans les pages. Donc, probablement, si vous rencontrez cette erreur, vous devez attacher la bibliothèque 'core/jquery.form' à votre page (ou à votre formulaire). Ajoutez quelque chose comme ceci à votre tableau de rendu:

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

Essayez ajaxsubmit library. Il effectue la soumission en ajax ainsi que la validation via ajax.

La configuration est également très flexible pour prendre en charge tout type d’interface utilisateur.

démo en direct disponible avec des exemples js, css et html.

1
Bogdan Gusiev