Question

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

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

它对我来说不是开箱即用的。我使用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

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

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

这样，如果验证成功，它只会尝试进行AJAX提交（否则会触发invalidHandler）。如果您想查看实时示例，请点击此处the related validation plugin demo。

在jQuery验证中使用ajaxform的最佳方法是什么？

1 个答案: