jQuery valider avec AJAX dans submitHandler, présente sur second clic?

Je suis nouveau sur AJAX et utilisé le code de cette réponse ici jQuery Ajax POST exemple avec PHP pour intégrer un formulaire sur un site WordPress. Il fonctionne très bien, mais je vais avoir de la difficulté à l'intégrer avec jquery validation

J'ai essayé de placer le code javascript de la page ci-dessus dans la submitHandler fonction ci-dessous

$("#my-form").validate({
  submitHandler: function(form) {
    **js from other page**
  }
});

Mon formulaire valide sur le premier clic. Ensuite, si je tape dans l'entrée et soumettre rien ne se passe, je dois cliquer une deuxième fois pour le formulaire pour soumettre correctement avec l'AJAX. Ci-dessous est un jsfiddle. Toute aide est appréciée grâce.

Un jsfiddle de mon code pensée il va connecter une erreur de la console depuis form.php n'est pas lié

Qu'est-ce que **js from other page** censé être? S'il vous plaît montrer assez de code pour faire un concis de démonstration du problème. Votre OP ne doit pas s'appuyer sur les liens externes pour montrer tout le code. Le jQuery Valider plugin ne nécessite cliquez, sauf si vous avez tort, enveloppé .validate() à l'intérieur d'un click ou submit gestionnaire. Et dans votre cas, vous avez tort, enveloppé d'un submit de gestionnaire à l'intérieur du plugin par défaut de submitHandler. Depuis le plugin submitHandler rappel déjà capture l'événement submit, votre joint submit gestionnaire est redondant.

OriginalL'auteur Anagio | 2013-08-16

  1. 11

    Le travail de la submitHandler est de soumettre le formulaire, de ne pas enregistrer un formulaire de soumission de gestionnaire d'événements.

    La submitHandler est appelée lorsque l'formm soumettre événement est déclenché, dans votre cas, au lieu de la soumission du formulaire, vous avez été l'enregistrement d'un gestionnaire de soumission ainsi, lorsque le formulaire de soumission de l'événement est déclenché pour la première fois que le formulaire n'est pas soumis. quand il est tiré pour la deuxième fois, d'abord le soumettre événement est traité par le programme de validation puis le gestionnaire de votre inscription est déclenché qui déclenche la requête ajax.

    Dans le submitHandler vous avez juste à envoyé la requête ajax il n'y a pas besoin de s'inscrire le gestionnaire d'événement

    $("#add-form").validate({
    submitHandler: function (form) {
        //setup some local variables
        var $form = $(form);
        //let's select and cache all the fields
        var $inputs = $form.find("input, select, button, textarea");
        //serialize the data in the form
        var serializedData = $form.serialize();

        //let's disable the inputs for the duration of the ajax request
        $inputs.prop("disabled", true);

        //fire off the request to /form.php

        request = $.ajax({
            url: "forms.php",
            type: "post",
            data: serializedData
        });

        //callback handler that will be called on success
        request.done(function (response, textStatus, jqXHR) {
            //log a message to the console
            console.log("Hooray, it worked!");
            alert("success awesome");
            $('#add--response').html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">×</button><strong>Well done!</strong> You successfully read this important alert message.</div>');
        });

        //callback handler that will be called on failure
        request.fail(function (jqXHR, textStatus, errorThrown) {
            //log the error to the console
            console.error(
                "The following error occured: " + textStatus, errorThrown);
        });

        //callback handler that will be called regardless
        //if the request failed or succeeded
        request.always(function () {
            //reenable the inputs
            $inputs.prop("disabled", false);
        });

    }
});
    Arun je viens de vérifier ce code et ma valeur d'entrée n'est pas envoyé à l'form.php fichier. Revenir à l'ancien code à la validation des travaux. Quelques changements dans votre code ne sont pas ayant du var demande et de la fonction (forme) au lieu de l'événement. Pourriez-vous tout de ces changements, la cause de mon entrée pour ne pas être envoyé? Merci
    Cela a fini de travailler submitHandler: function (form) {var $form = $(form); sinon je obtenir un formulaire n'est pas défini d'erreur
    Ce doit être l'URL du paramètre de l'url (ici, il est url:forms.php) si mon code js est dans un js/custom.js emplacement?
    est .valider() est un plugin? Je ne trouve rien à ce sujet dans la documentation.
    href="http://jqueryvalidation.org/" >jqueryvalidation.org

    OriginalL'auteur Arun P Johny

  2. 3

    Appel $("#add-form").submit(function(){...}) ne pas soumettre le formulaire. Il se lie à un gestionnaire qui dit quoi faire quand l'utilisateur soumet le formulaire. C'est pourquoi vous devez soumettre deux fois: la première fois invoque le valider plugin gestionnaire de soumission, qui valide les données et exécute votre fonction, et la deuxième fois invoque le gestionnaire de soumission que vous avez ajouté la première fois.

    Ne pas envelopper le code à l'intérieur .submit(), juste le faire directement dans votre submitHandler: fonction. Modification:

    var $form = $(this);

    :

    var $form = $(form);

    Vous n'avez pas besoin event.PreventDefault(), valider le plugin ne fonctionne que pour vous en tant que bien.

    OriginalL'auteur Barmar

  3. 2
    $("#add-form").validate({
    submitHandler: function (form) {
        var request;
        //bind to the submit event of our form



        //let's select and cache all the fields
        var $inputs = $(form).find("input, select, button, textarea");
        //serialize the data in the form
        var serializedData = $(form).serialize();

        //let's disable the inputs for the duration of the ajax request
        $inputs.prop("disabled", true);

        //fire off the request to /form.php

        request = $.ajax({
                url: "forms.php",
                type: "post",
                data: serializedData
        });

        //callback handler that will be called on success
        request.done(function (response, textStatus, jqXHR) {
                //log a message to the console
                console.log("Hooray, it worked!");
                alert("success awesome");
                $('#add--response').html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">×</button><strong>Well done!</strong> You successfully read this important alert message.</div>');
        });

        //callback handler that will be called on failure
        request.fail(function (jqXHR, textStatus, errorThrown) {
                //log the error to the console
                console.error(
                    "The following error occured: " + textStatus, errorThrown);
        });

            //callback handler that will be called regardless
            //if the request failed or succeeded
        request.always(function () {
                //reenable the inputs
                $inputs.prop("disabled", false);
        });            

    }
});

    OriginalL'auteur simple_human