jQuery验证 - 工作，但不“提交”

Question

我有一个很好地用验证消息“点亮”的窗体，并在通过验证时将“保存”按钮更改为“正在加载...”。都好。

但是，表单从未提交。

我觉得我缺少根本。

$("#btnSave").on("click", function() { 

     if ($("#formMain").valid()) { 
      var btn = $(this); 
      btn.button('loading'); //This works and fires when the form is valid 
      setTimeout(function() { 
       btn.button('reset'); 
      }, 3000); 
      $("#formMain").submit(); //FireBug says this is hit, but nothing happens 
     } 
    }); 

在情况下，它是我的验证，这里是供参考：

var CloudFormValidation = function() { 


var handleValidation = function() { 
    // for more info visit the official plugin documentation: 
    // http://docs.jquery.com/Plugins/Validation 

    var form2 = $('#formMain'); 
    var error2 = $('.alert-danger', form2); 
    var success2 = $('.alert-success', form2); 

    form2.validate({ 
     errorElement: 'span', //default input error message container 
     errorClass: 'help-block', // default input error message class 
     focusInvalid: false, // do not focus the last invalid input 
     ignore: "", 


     invalidHandler: function(event, validator) { //display error alert on form submit    
      success2.hide(); 
      error2.show(); 
      App.scrollTo(error2, -200); 
     }, 

     errorPlacement: function(error, element) { // render error placement for each input type 
      var icon = $(element).parent('.input-icon').children('i'); 
      icon.removeClass('fa-check').addClass("fa-warning"); 
      icon.attr("data-original-title", error.text()).tooltip({ 'container': 'body' }); 
     }, 

     highlight: function(element) { // hightlight error inputs 
      $(element) 
       .closest('.form-group').addClass('has-error'); // set error class to the control group 
     }, 

     unhighlight: function(element) { // revert the change done by hightlight 

     }, 

     success: function(label, element) { 
      var icon = $(element).parent('.input-icon').children('i'); 
      $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group 
      icon.removeClass("fa-warning").addClass("fa-check"); 
     }, 

     submitHandler: function(form) { 
      success2.show(); 
      error2.hide(); 
     } 
    }); 


}; 




return { 
    //main function to initiate the module 
    init: function() { 
     handleValidation(); 
    } 

}; 

}（）;

Answer 1

谢谢Ostati和John S，您让我在右边的架子上。下面是我所做的更改，使TI工作：

我的提交按钮（只是）

$("#btnSave").on("click", function() { 
     $("#formMain").submit(); //Do this here to kick off the process 

     if ($("#formMain").valid()) { //If valid the plugin will submit for real 
      var btn = $(this); 
      btn.button('loading'); 
      setTimeout(function() { btn.button('reset'); }, 3000); 
     } 
    }); 

然后我提交处理程序：

 submitHandler: function(form) { 
      success2.show(); 
      error2.hide(); 
      form.submit(); //Must be called here, 
     } 

Answer 2

尝试不同的提交机制

$(this).closest("form").submit() 

此外，你可以暂时删除setTimeout电话吗？

Answer 3

我相信你应该在submitHandler方法中提交表格。

你可以尝试：

submitHandler: function(form) { 
    $("#btnSave").button('loading'); 
    setTimeout(function() { $("#btnSave").button('reset'); }, 3000); 
    success2.show(); 
    error2.hide(); 
    form.submit(); 
} 

然后，如果按钮是一个提交按钮，你可以删除上单击处理程序。如果不是，您可以将其更改为：

$("#btnSave").click(function() { 
    $("#formMain").submit(); 
}); 

Answer 4

确保您的按钮具有type="submit"属性设置。