Question

我无法弄清楚为什么验证在第一次点击时不起作用，但稍后会有效。

我已将validate插件添加到JS文件中，因此点击后即可验证表单。

如您所见，验证器在文档准备就绪时设置。然后，单击表单时，验证程序将检查表单是否有效。

function submit(form) {
    var formData = new FormData($(form).get(0));
    alert('Thank you for your message! Our support will reply as soon as possible.');
    $.ajax({
        url: '/contact-us-ajax/',
        type: 'POST',
        data: formData,
        async: true,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
            alert('success');
        }
    });

    return false;
}

$(document).ready(function () {
    jQuery.validator.setDefaults({
        debug: true,
        success: "valid"
    });
    $("#contact-us-form").submit(function (b) {
        b.preventDefault();
        this_form = $(this);

        $("#contact-us-form").validate({
            rules: {
                sender: {
                    required: true
                },
                subject: {
                    required: true
                },
                message: {
                    required: true
                }
            },
            messages: {
                sender: {
                    required: "Short description can't be empty. Please fill this field."
                },
                subject: {
                    required: "Please choose current language."
                },
                message: {
                    require_from_group: "Either fill this form with a text or attach a file (below)."
                }
            }, submitHandler: function (this_form) {
                submit(this_form);
            }
        });
    });
});

Answer 1

我已经找出问题所在。首次点击后，它只是添加了validator，然后在第二次点击时，form已经过验证，然后又提交了。

以下是工作代码：

function submit(form) {
    var formData = new FormData($(form).get(0));
    alert('Thank you for your message! Our support will reply as soon as possible.');
    $.ajax({
        url: '/contact-us-ajax/',
        type: 'POST',
        data: formData,
        async: true,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
            alert('success');
        }
    });
    return false;
}

function attachValidate() {
        $("#contact-us-form").validate({
            rules: {
                sender: {
                    required: true
                },
                subject: {
                    required: true
                },
                message: {
                    required: true
                }
            },
            messages: {
                sender: {
                    required: "Short description can't be empty. Please fill this field."
                },
                subject: {
                    required: "Please choose current language."
                },
                message: {
                    require_from_group: "Either fill this form with a text or attach a file (below)."
                }
            }, submitHandler: function (this_form) {
                submit(this_form);
            }
        });
}

$(document).ready(function () {
    jQuery.validator.setDefaults({
        debug: true,
        success: "valid"
    });
    attachValidate();
    $("#contact-us-form").submit(function (b) {
        b.preventDefault();
        $(this).validate();
        });

});

JQuery在第二次或第三次单击时提交表单 - 验证

1 个答案: