Question

我正在使用jQuery Validate和ajaxSubmit将多部分/表单数据表单发布到我的CI控制器。

//Form Submit functions
    $('#newEventSubmit').click(function(s) {
        $("#newEventForm").validate({
            errorClass: "validattion",
            validClass: "valid",
            highlight: function( element, errorClass, validClass ) {
                $(element).addClass(errorClass).removeClass(validClass);
            },
            unhighlight: function( element, errorClass, validClass ) {
                $(element).removeClass(errorClass).addClass(validClass);
            },
            errorPlacement: function(error, element) { },
            submitHandler: function(form) {
                var formObj = $(form);
                var formURL = formObj.attr("action");
                var formData = new FormData(this);
                $(form).ajaxSubmit({
                    url: formURL,
                    type: 'POST',
                    data:  formData,
                    mimeType:"multipart/form-data",
                    contentType: false,
                    cache: false,
                    dataType: "HTML",
                    processData: false,
                    success: function(data) {
                        console.log(data);
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.log(errorThrown);
                        console.log(jqXHR);
                        console.log(textStatus);
                    }
                });
            }
        });
    });

我的问题是，我有一个隐藏的div，这是我想在ajaxSubmit处理时显示的Hud。 $( "#hud-overlay" ).show();但是，当我将其放入点击事件时，表单会停止处理，如果我将其放在$(form).ajaxSubmit()代码中，它就不会触发，任何人都可以告诉我我做错了什么。< / p>

NB。我也试过这个，但无济于事。

$( document ).ajaxStart(function() {
    $( "#hud-overlay" ).show();
});

Answer 1

这是错误的......

$('#newEventSubmit').click(function(s) {
    $("#newEventForm").validate({ ...

您没有将.validate()方法放在click事件处理程序中。 .validate()方法仅适用于初始化表单上的插件。

插件会自动捕获submit按钮的点击事件。通常，您会将.validate()放在DOM ready事件处理程序中，然后在加载页面时初始化插件。

$(document).ready(function() {     // <- DOM is ready

    $("#newEventForm").validate({  // <- initialize the plugin on the form
        …                          // <- your options, rules, and callbacks
    });

});

jQuery验证ajaxSubmit show hidden div

1 个答案: