jQuery .validate () submitHandler não está triggersndo

Eu estou carregando uma checkbox de diálogo com um formulário que é construído on-the-fly usando Bootbox.js e estou validando a input do usuário com um plugin validar jQuery.

A validação funciona bem, mas o submitHandler é ignorado quando o formulário é preenchido com sucesso.

O que está errado?

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

Veja o exemplo completo abaixo. Eu olhei para outros posts onde um problema semelhante foi levantado. Infelizmente, eles parecem ter o formulário renderizado na página enquanto eu estou processando meu 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: '
' + '
' + ' ' + '

Please get in touch if you wish to delete this content

' + '
' + '
' + ' ' + 'Feel free to change the message and add more information. Please ensure you always provide the link.
' + '
' + '
' + ' ' + '
' + '
' + '
' + '
' + '
' }); });
      Contact Web team 

Ver no jsFiddle

Inspecionando o DOM do jsFiddle e dois problemas se tornam aparentes.

  1. Seu “submit” é um type="button" .

  2. Seu botão “enviar” está fora do contêiner

    .

Se você quiser que o plugin jQuery Validate capture automaticamente o evento click do click “enviar” …

  • o botão deve ser um type="submit"
  • O botão deve estar dentro do contêiner

    .

Essas duas condições devem ser atendidas se você quiser que o plug-in funcione conforme pretendido.


Você também colocou incorretamente o método .validate() no retorno de chamada de success da checkbox de modal dialog “enviar”.

O método .validate() é usado apenas para inicializar o plug-in e deve ser chamado uma vez após a criação do formulário.


EDITAR :

Depois de brincar com isso, torna-se evidente que o plugin modal do Bootbox pode ter algumas limitações críticas que interferem com o envio do formulário.

  1. Eu estou inicializando o plugin Validate depois que o diálogo é aberto.

  2. Eu estou usando o método .valid() dentro do “submit” para acionar o teste de validação.

Eu posso obter validação inicializada e funcionando como deveria, mas a checkbox de diálogo é descartada antes que a submissão do formulário real ocorra. Talvez exista uma solução, mas depois de revisar a documentação do Bootbox, isso não fica evidente.

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


EDIT 2:

De acordo com a solução do 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 } } } } }); 

No entanto, simplesmente usando o argumento do form fornecido diretamente, você não tem nenhum erro ao usar a opção submitHandler do plugin jQuery Validate.

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

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

Obrigado Sparky por sua ajuda, a solução fornecida forneceu a resposta. Parece ter o submitHandler causa alguma confusão para a lógica de envio.

Eu removi o submitHandler e adicionei o seguinte ao callback de sucesso e tudo funciona conforme o esperado

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

Eu sei que este é um post antigo, mas pensei em compartilhar minha resolução com um problema semelhante. Não consegui enviar meu formulário pressionando enter, mas consegui validá-lo ao entrar. Então usei o método de encadeamento e agora posso enviar meu formulário para entrar.

jQuery:

  //Variables created without the keyword var, are always global, even if they are created inside a function. var form = $('#'); 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 } }); 

Você deve alterar o nome do seu botão de envio, porque você tem um conflito de nomes. Por exemplo, tente alterá-lo de name="submit" para name="other" .

Intereting Posts