jQuery验证-可以，​​但是不能“提交"； [英] jQuery Validation - Works, but doesn't "submit"

问题描述

我有一个表单，可以很好地点亮"验证消息，并在通过验证时将保存"按钮更改为正在加载...".一切都很好.

I have a form that nicely "lights up" with validation messages and changes the "Save" button to "Loading..." as it passes validation. All good.

但是，该表单从不提交.

However, the form is never submitted.

我认为我缺少基本面.

I think I am missing fundamental.

    $("#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
        }
    });

如果它是我的验证器，请参考:

In case it's my validator, here it is for reference:

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

};

}();

推荐答案

感谢Ostati和John S，您把我放在正确的位置上.这是我为使ti工作所做的更改:

Thanks Ostati and John S, you got me on the right rack. Here's the changes I made to make ti work:

我的提交按钮(只是一个)

My submit button (just a )

    $("#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);
      }
    });

然后是我的提交处理程序:

Then my submit handler:

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

这篇关于jQuery验证-可以，​​但是不能“提交"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！