0

ajaxform jQuery プラグインを使用して ajaxed HTML フォームを作成しており、jQuery Validationプラグインを使用して検証を実装したいと考えています。

これを実装する最良の方法が何であるかはわかりません。

私にとっては、そのままでは機能しません。でフォームを設定してから、form.ajaxform({})で検証を設定しform.validate({})ます。検証プラグインで invalidHandler イベントが発生しますが、ajaxform は引き続きフォームを送信します。

2つを正しく配線するにはどうすればよいですか？

私のコード:

_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 に答える