jQuery .validate() submitHandler nie wypalanie

Question

mam ładowania okna dialogowego z formularza, który jest zbudowany na locie przy użyciu Bootbox.js a ja walidacji danych wprowadzanych przez użytkownika za pomocą jQuery sprawdzania poprawności wtyczkę.

Validation działa dobrze, ale submitHandler jest ignorowany, gdy formularz jest wypełniony poprawnie.

Co się dzieje źle?

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

Zobacz pełny przykład poniżej. Przyjrzałem się innym postom, w których podobny problem został poruszony. Niestety, wydaje się, że formularz jest renderowany na stronie, a ja renderuję mój 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>

View on jsFiddle

Answer 1

Kontrola DOM z jsFiddle i dwa problemy stają się widoczne.

1. Twój "submit" <button> jest type="button".

2. Twój przycisk „wyślij” jest na zewnątrz pojemnika <form></form>.

Jeśli chcesz plugin jQuery Walidacja automatycznie przechwytywać zdarzenia click przycisku „Wyślij” ...

• przycisk musi być type="submit"
• Przycisk musi mieścić się w <form></form> pojemnik.

Te dwa warunki muszą zostać spełnione, aby wtyczka działała zgodnie z przeznaczeniem.

---

Ty też nieprawidłowo umieszczony metodę .validate() w success zwrotnego swojej modalnego okna dialogowego przycisk „wyślij”.

Sposób .validate() służy tylko do inicjowanie wtyczki i powinna nazywać raz po utworzeniu formularza.

---

EDIT:

Po zabawy z tym, staje się oczywiste, że Bootbox modal plugin może mieć pewne ograniczenia, które zakłócają krytyczne ze złożeniem formularza.

1. ja inicjalizacji wtyczki Weryfikuj po okno jest otwarte.

2. Używam metody .valid() w "Wyślij", aby uruchomić test sprawdzania poprawności.

mogę dostać walidacja zainicjowany i działa tak jak powinien, ale okno zostaje odrzucona przed faktycznym złożenie formularza odbywa. Być może istnieje rozwiązanie, ale po przejrzeniu dokumentacji Bootbox nie jest to oczywiste.

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

---

EDIT 2:

Jak na rozwiązanie 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 
       } 
      } 
     } 
    } 
}); 

Jednakże, po prostu za pomocą dołączonego bezpośrednio form argumentu, nie robić występują jakiekolwiek błędy podczas korzystania z opcjiwtyczki jQuery Validate.

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

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

Answer 2

Sparky Dzięki za pomoc, rozwiązanie Twojego warunkiem dał mi odpowiedź. Wygląda na to, że submitHandler powoduje pewne zamieszanie w logice przesyłania.

usunąłem submitHandler i dodaje następujące do sukcesu zwrotnego i wszystko działa zgodnie z oczekiwaniami

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

Answer 3

Wiem, że to stary post, ale pomyślałem, że podzielę się moją determinację do podobnego problemu. Nie mogłem dostać mojego formularza do przesłania przez naciśnięcie klawisza Enter, ale mogłem go zatwierdzić przy wejściu. Więc użyłem metody łączenia, a teraz mogę przesłać mój formularz przy wejściu.

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 
    } 
    }); 

Answer 4

powinien zmienić nazwę swojego przedstawienia przycisku, ponieważ masz konflikt nazw. Na przykład spróbuj zmienić go z name="submit" na name="other".