0

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

我不确定实现这一点的最佳方法是什么。

它对我来说不是开箱即用的。我使用 设置表单，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);
                }
            }
        );
    });
}
4

1 回答 1

1

而不是.ajaxForm(),.ajaxSubmit()在你的submitHandler（仅在成功时触发）中使用，如下所示：

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

这样，它只会在验证成功时尝试进行 AJAX 提交（否则会invalidHandler被触发）。如果你想看一个活生生的例子，这里是相关的验证插件演示。

于 2010-09-08T00:50:50.967 回答