web-dev-qa-db-fra.com

jQuery .validate () submitHandler ne se déclenche pas

Je charge une boîte de dialogue avec un formulaire créé à la volée à l'aide de Bootbox.js et je valide l'entrée de l'utilisateur avec un plugin jQuery validate.

La validation fonctionne parfaitement, mais la variable submitHandler est ignorée lorsque le formulaire est rempli avec succès.

Qu'est-ce qui ne va pas?

submitHandler: function(form) {
    alert("Submitted!");
    var $form = $(form);
    $form.submit();
}

Voir l'exemple complet ci-dessous. J'ai examiné d'autres publications où un problème similaire avait été soulevé. Malheureusement, ils semblent avoir la forme rendue sur la page alors que je suis en train de rendre mon via jQuery.

$(document).on("click", "[data-toggle=\"contactAdmin\"]", function() {
  bootbox.dialog({
    title: "Contact admin",
    buttons: {
      close: {
        label: 'Close',
        className: "btn btn-sm btn-danger",
        callback: function() {}
      },
      success: {
        label: "Submit",
        className: "btn btn-sm btn-primary",
        callback: function() {
          $("#webteamContactForm").validate({
            rules: {
              requestType: {
                required: true
              }
            },
            messages: {
              requestType: {
                required: "Please specify what your request is for",
              }
            },
            highlight: function(a) {
              $(a).closest(".form-group").addClass("has-error");
            },
            unhighlight: function(a) {
              $(a).closest(".form-group").removeClass("has-error");
            },
            errorElement: "span",
            errorClass: "help-blocks",
            errorPlacement: function(error, element) {
              if (element.is(":radio")) {
                error.appendTo(element.parents('.requestTypeGroup'));
              } else { // This is the default behavior 
                error.insertAfter(element);
              }
            },
            submitHandler: function(form) {
              alert("Submitted!");
              var $form = $(form);
              $form.submit();
            }
          }).form();
          return false;
        }
      }
    },
    message: '<div class="row">  ' +
      '<div class="col-md-12"> ' +
      '<form id="webteamContactForm" class="form-horizontal" method="post"> ' +
      '<p>Please get in touch if you wish to delete this content</p>' +
      '<div class="form-group"> ' +
      '<div class="col-md-12"> ' +
      '<textarea id="message" name="message" class="form-control input-md" rows="3" cols="50">This email is to notify you the creator is putting a request for the following item\n\n' +
      this.attributes.getNamedItem("data-url").value + '\n\n' + '</textarea> ' +
      '<span class="help-block">Feel free to change the message and add more information. Please ensure you always provide the link.</span> </div> ' +
      '</div> ' +
      '<div class="form-group requestTypeGroup"> ' +
      '<label class="col-md-4 control-label" for="requestType">This request is for:</label> ' +
      '<div class="col-md-4"> <div class="radio"> <label for="Edit"> ' +
      '<input type="radio" name="requestType" id="requestType-0" value="Edit"> ' +
      'Editing </label> ' +
      '</div><div class="radio"> <label for="Delete"> ' +
      '<input type="radio" name="requestType" id="requestType-1" value="Delete"> Deletion</label> ' +
      '</div> ' +
      '</div> </div>' +
      '</form> </div>  </div>'
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.js"></script>

<a data-toggle="contactAdmin" data-title="help" data-url="http:/www.mydomain.com/some-url" href="#">Contact Web team</a>

Vue sur jsFiddle

jqueryjquery-validatebootbox
12
david-l

En inspectant le DOM du jsFiddle, deux problèmes apparaissent.

  1. Votre "submit" <button> est un type="button".

  2. Votre bouton "soumettre" est en dehors du conteneur <form></form>.

Si vous voulez que le plugin jQuery Validate capture automatiquement l'événement click du bouton "submit" ...

  • le bouton doit être un type="submit"
  • Le bouton doit être dans le conteneur <form></form>.

Ces deux conditions doivent être remplies si vous souhaitez que le plug-in fonctionne comme prévu. 

Vous avez également placé de manière incorrecte la méthode .validate() dans le rappel success de votre bouton "soumettre" de la boîte de dialogue modale.

La méthode .validate() n'est utilisée que pour initialisation du plugin et doit être appelée une fois après la création du formulaire.

MODIFIER:

Cela fait, il apparaît que le plugin Bootbox modal peut comporter certaines limitations critiques qui gênent la soumission du formulaire. 

  1. J'initialise le plugin Validate after la boîte de dialogue est ouverte.

  2. J'utilise la méthode .valid() dans "submit" pour déclencher le test de validation.

Je peux obtenir la validation initialisée et fonctionner comme il se doit, mais la boîte de dialogue est fermée avant la soumission du formulaire. Peut-être y a-t-il une solution, mais après avoir examiné la documentation de Bootbox, ce n'est pas évident.

https://jsfiddle.net/vyaw3ucd/2/

EDIT 2:

Selon la solution de l'OP ...

bootbox.dialog({
    // other options,
    buttons: {
        success: {
            label: "Submit",
            className: "btn btn-sm btn-primary",
            callback: function () {
                if ($("#webteamContactForm").valid()) {
                    var form = $("#webteamContactForm");
                    form.submit();  // form submits and dialog closes
                } else {
                    return false;  // keeps dialog open
                }
            }
        }
    }
});

Cependant, en utilisant simplement directement l'argument form fourni, vous ne rencontrez aucune erreur lorsque vous utilisez l'option submitHandler du plugin jQuery Validate.

submitHandler: function (form) {
    console.log("Submitted!");
    form.submit();
}

DEMO: https://jsfiddle.net/vyaw3ucd/5/

21
Sparky

Merci Sparky pour votre aide, la solution que vous avez fournie m'a donné la réponse. Il semble qu'avoir submitHandler provoque une certaine confusion dans la logique de soumission.

J'ai enlevé le submitHandler et ajouté ce qui suit au rappel de succès et tout fonctionne comme prévu

success: {
         label: "Submit",
         className: "btn btn-sm btn-primary",
         callback: function () {
             if($("#webteamContactForm").valid()){
                    var form = $("#webteamContactForm");
                    form.submit();
                } else {
                    return false;
                }
         }
    }
2
david-l

Je sais que ceci est un ancien post, mais je pensais partager ma résolution à un problème similaire. Je ne pouvais pas envoyer mon formulaire en appuyant sur Entrée, mais je pouvais le faire valider à l’entrée. J'ai donc utilisé la méthode de chaînage et je peux maintenant soumettre mon formulaire en entrant.

jQuery:  

  //Variables created without the keyword var, are always global, even if they are created inside a function.
    var form = $('#<?echo $PAGEID?>');
    var FormError = $('.alert-danger',form);
    var success = $('.alert-success',form);

     form.keypress(function(e){
         if(e.which == 13){ //TRIGGER SUBMIT THROUGH ENTER      
             document.getElementById('defaultActionButton').click(); 
         }
     }).validate({
        focusInvalid: false, // do not focus the last invalid input
        onkeyup: false, 
        ignore: ".ignore", //required for hidden input validation ie: hiddenRecaptcha
        rules:{
            "TYPE": {
                required: true,     
            },
            "MSG": {
                required: true,
                rangelength:[40,1000]
            },
            "CONTACT": {
                 required: {
                     depends: "#newuser:checked"
                 }
            },
            "EMAIL": {
                 required: true,
                 email: {
                    depends: function() {
                        if(!$("#newuser:checked"))
                            return true;
                        else
                            return false;
                    }
                 },
                 HTH_TelephoneEmail: {
                        depends: function() {
                            if($("#newuser:checked"))
                                return true;
                            else
                                return false;
                        }
                     }
            },          
            hiddenRecaptcha: {
                required: function () {
                    if (grecaptcha.getResponse() == '') {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        },
        messages: { // custom messages for form validation input
               "TYPE": {
                    required: 'Please select an option as it pertains to your inquiry'
               },
               "MSG": {
                    required: 'Please provide some content as it pertains to your inquiry'       
               },
               "CONTACT": {
                required: "Please enter a contact person or company"
               },
              hiddenRecaptcha: {
                required: function() {
                    $(".g-recaptcha:first").tooltip("enable").tooltip("show");
                }
              }
        },
        showErrors: function(errorMap, errorList) {
            // Clean up any tooltips for valid elements
            $.each(this.validElements(), function (index, element) {
                element = $(element);
                NoError_ToolTip(element);
            });
            // Create new tooltips for invalid elements
            $.each(errorList, function (index, error) {
                element = $(error.element);
                message = error.message;
                Error_ToolTip(element,message);
            });
        },                  
        invalidHandler: function (event, validator) { //display error alert on form submit     
            success.hide();
            $(document).scrollTop( $(".form-body").offset().top ); 
        },
         submitHandler: function () { 
       Submit_Complete(); //fires ajax call
   }
    });
1
yardpenalty

Vous devez modifier le nom de votre bouton d'envoi, car vous avez un conflit de noms. Par exemple, essayez de le remplacer de name="submit" par name="other".

0
Reimi Beta