web-dev-qa-db-fra.com

plugin de validation jQuery + soumission ajax ne fonctionne pas

J'utilise le plugin de validation jQuery (1.11) de bassistance.de et je soumets via php. Maintenant, j'ai ajouté un appel ajax dans le gestionnaire de soumission à la fin du code javacript, mais l'appel ne fonctionne pas et n'existe pas pour la console Firebug.

CAS 1 Si je mets l'appel ajax au début du site, cela fonctionne mais le plugin de validation n'est plus vu.

CAS 2 Si je mets l'appel à l'intérieur du gestionnaire de soumission, il n'existe pas et le formulaire est envoyé par php.

CAS Si je mets le code à la fin de la page, le formulaire de contact est toujours envoyé par php.

Voici l'appel ajax:

$("#contactform").submit(function(e){
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "formfiles/submit.php",
        data: $(this).serialize(),
        success: function() {
            $('#contactform').html("<div id='message'></div>");
            $('#message').html("<h2>Your request is on the way!</h2>")
            .append("<p>someone</p>")
            .hide()
            .fadeIn(1500, function() {
                $('#message').append("<img id='checkmark' src='images/ok.png' />");
            });
        }
     });
     return false;
});

Quelqu'un sait ce qui ne va pas?

Merci d'avance pour toute aide, me battant la tête à ce sujet.

EDIT Pour mieux comprendre le problème, voici le javascript complet

    $(document).ready(function(){
$("#contactform").validate();      
$(".chapta").rules("add", {maxlength: 0});     



var validator = $("#contactform").validate({

     ignore: ":hidden",
    rules: {
        name: {
            required: true,
            minlength: 3
        },
        cognome: {
            required: true,
            minlength: 3
        },
        subject: {
            required: true,

        },



        message: {
            required: true,
            minlength: 10
        }
    },

    submitHandler: function(form) {



   $("#contactform").submit(function(e){
   e.preventDefault();
   $.ajax({
    type: "POST",
    url: "formfiles/submit.php",
    data: $(this).serialize(),
    success: function() {
        $('#contactform').html("<div id='message'></div>");
        $('#message').html("<h2>Your request is on the way!</h2>")
        .append("<p>someone</p>")
        .hide()
        .fadeIn(1500, function() {
            $('#message').append("<img id='checkmark' src='images/ok.png' />");
        });
    }
    });
    return false;
 });
    },

});

 });

MODIFIER 2

Les sélecteurs et tout le reste semblent aller bien.

 <form action="#n" class="active" method="post" name="contactform" id="contactform">
jqueryajaxjquery-validate
13
Someone33

Votre ajax appartient à l'intérieur la fonction de rappel submitHandler du plugin jQuery Validate.

selon les documents ,

submitHandler , Callback, Default: par défaut (natif) formulaire submit

Rappel pour le traitement de la soumission réelle lorsque le formulaire est valide. Obtient le formulaire comme seul argument. Remplace la soumission par défaut. Le bon endroit pour soumettre un formulaire via Ajax après sa validation .

Votre autre problème est que vous appelez deux fois .validate(). Après son premier appel, l'autre instance est ignorée, de même que toutes les règles que vous essayez de lui transmettre. La méthode .validate() est appelée UNE fois sur DOM prêt à initialiser le plugin sur votre formulaire.

Enfin, vous n'avez pas besoin de mettre un gestionnaire submit dans la fonction de rappel submitHandler.

DEMO: http://jsfiddle.net/nTNLD/1/

$(document).ready(function () {

     $("#contactform").validate({
         ignore: ":hidden",
         rules: {
             name: {
                 required: true,
                 minlength: 3
             },
             cognome: {
                 required: true,
                 minlength: 3
             },
             subject: {
                 required: true
             },
             message: {
                 required: true,
                 minlength: 10
             }
         },
         submitHandler: function (form) {
             $.ajax({
                 type: "POST",
                 url: "formfiles/submit.php",
                 data: $(form).serialize(),
                 success: function () {
                     $(form).html("<div id='message'></div>");
                     $('#message').html("<h2>Your request is on the way!</h2>")
                         .append("<p>someone</p>")
                         .hide()
                         .fadeIn(1500, function () {
                         $('#message').append("<img id='checkmark' src='images/ok.png' />");
                     });
                 }
             });
             return false; // required to block normal submit since you used ajax
         }
     });

 });
32
Sparky

Vous devez mettre votre code dans le rappel de document prêt, pour être sûr que le DOM (votre formulaire) est chargé avant.

$(document).ready(function() {
 //Code
});

Vous devez supprimer votre .submit() existante de submitHandler et la placer en dehors de l'initialisation de validation mais à l'intérieur de ready. Ensuite, à l'intérieur de submitHandler vous appelez uniquement form.submit(); Avec form.submit(); vous déclenchez submit, l'autre est alors déclenché.

Ou vous placez votre $.ajax Directement dans submitHandler.

Comme vous le faites maintenant, vous n'ajoutez l'écouteur d'événements qu'au moment où vous cliquez sur votre bouton d'envoi. C'est en fait trop tard. Juste après, votre formulaire est envoyé sans ajax.

1
Marcel Gwerder

C'est facile. Ne faites que ça

if ( $( "label.error" ).length===false || $( "label.error" ).is(":visible")===false) {

here set the ajax

}
1
Carlos