将 ajaxform 与 jQuery 验证结合使用的最佳方法是什么？

Question

我正在使用 ajaxform jQuery 插件创建 ajaxed HTML 表单并希望使用 jQuery 验证 插件。

我不确定实现此目的的最佳方法是什么。

它对我来说不是开箱即用的。我使用 form.ajaxform({}) 设置表单，然后使用 form.validate({}) 设置验证。 invalidHandler 事件在验证插件上触发，但 ajaxform 仍然提交表单。

如何正确连接两者？

---

我的代码：

_initializeValidation: function (form) {

    var options = {
        rules:
            {
                Name:
                {
                    required: true
                }
            },
        messages:
            {
                Name: "Name is required",
                ShortName: "Short name is required"
            }
    };

    if (form.find("#ShortName").length == 1)
        $.extend(options.rules, { ShortName: { required: true} });

    form.validate(options);
}

/* 
*   Initializes a newly loaded edit form
*/
_initializeEdit: function (panel) {
    var thisDetailTab = this;
    var form = panel.find("form");
    form.ajaxForm(
        {
            target: panel,
            url: this._config.updateUrl,
            beforeSubmit: function (arr, $form, options) {
                return form.valid();
            },
            success: function (responseText, statusText, xhr, form) {
                thisDetailTab._initializeDetails(panel);
                thisDetailTab._config.refreshSummary();
            }
        }
    );

    this._initializeValidation(form);

    var cancelButton = panel.find(".cancelButton");
    cancelButton.click(function (event) {
        $.ajax(
            {
                url: thisDetailTab._config.detailsUrl,
                success: function (data) {
                    panel.empty();
                    panel.append(data);
                    thisDetailTab._initializeDetails(panel);
                }
            }
        );
    });
}

Answer 1

使用 .ajaxSubmit() 在您的 submitHandler （仅在成功时触发），如下所示：

$("form").validate({
  rules: { ... },
  submitHandler: function(form) {
    $(form).ajaxSubmit({ ...options... });
  }
});

这样它只会尝试执行以下操作如果验证成功，则 AJAX 提交（否则将触发 invalidHandler）。如果您想查看实时示例，请查看相关验证插件演示< /a>.