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" 属性。