1

jquery uiダイアログにフォームが表示されています。ajax でフォームを読み込み、ajax を使用してフォームを送信します。

フィールドが一意であり、サーバー側でのみ発生することを確認する検証があります。

したがって、コントローラーで検証エラーを ModelState に追加します。

    public ActionResult CreateOrEdit(Property p)
    {

        _Uow.PropertyRepository.InsertOrUpdate(p);

        //My unit of work has a method that returns any data layer validation errors
        foreach (var error in _Uow.GetValidationErrors())
            ModelState.AddModelError(error.Key, error.Value);

        if (ModelState.IsValid)
            _Uow.Save();

        return GetCreateOrEditView(p, "Property");

    }

編集 get で使用されるのと同じビューを返すため、フィールドがクライアント側で失敗した場合と同じ動作になります。ダイアログにはフォームが含まれており、検証エラーは他のエラーと同様にフィールドの横に表示されます。

ここで、ダイアログを閉じたくありません。ダイアログの上部に、このヘルパーで作成された検証の凡例があります。

    public static MvcHtmlString ValidationLegend(this HtmlHelper htmlHelper
                                     , string message = "The form is invalid.")
    {
        string cssClass = htmlHelper.ViewData.ModelState.IsValid ? 
                        "validation-summary-valid" : "validation-summary-errors";
        var tagBuilder = new TagBuilder("div");
        tagBuilder.Attributes.Add("id", "validation-legend");
        tagBuilder.Attributes.Add("data-valmsg-summary", "true");
        tagBuilder.SetInnerText(message);
        tagBuilder.AddCssClass(cssClass);
        return new MvcHtmlString(tagBuilder.ToString());
    }

したがって、サーバー エラーが発生した場合、このヘルパーはこの html で凡例を表示します。

<div class="validation-summary-errors" data-valmsg-summary="true" 
id="validation-legend">The form is invalid.</div>

したがって、これは余分なメッセージのない検証の要約のようなものです。私は JavaScript に要約が存在することを利用して、ダイアログが閉じないようにしています。

1. ユーザーがサーバー側のエラー メッセージでフィールドを変更すると、フィールドの横にある検証エラーがクリアされます (サーバー側で確認できないため、変更されたものは何でも)。 2. 検証の凡例は、検証が失敗したときに表示され、すべての無効なフィールドがクリアされると非表示になります。

現在、凡例はサーバー検証エラーの場合にのみ表示され、送信ボタンがクリックされるまで凡例とフィールド エラーの両方が画面に表示されたままになります。これは、クライアント側の検証と矛盾しています。

目立たない検証の一部としてこれを実現するために追加できる他のデータ属性はありますか? それとも別の解決策がありますか？

これが私のJavaScriptです：

function submitDialogForm(successCallback) {

    var $dialog = $(this);
    var $form = $dialog.find("form").filter(':visible:first');
    if ($form.find("input:first").length > 0) {
        if ($form.updateValidation().valid()) {

            var $target = getTarget($dialog);
            $form.ajaxSubmit({
                target: $target,
                success: function () {
                    $target.find(".fadein").show();

                    //Check if server side validation has failed before closing 
                    $form = $dialog.find("form").filter(':visible:first');
                    if ($form.find("#validation-legend.validation-summary-errors").length > 0) {
                        return;
                    }

                    if (successCallback && typeof (successCallback) === "function") {
                        successCallback();
                    }
                    else {
                        $dialog.dialog("close");
                    }
                }
            });
        }
    }
    else {
        $dialog.dialog("close");
    }
}

完全を期すために含まれています - Ajax を使用して読み込まれた後にフォームを検証するためのコード。この回答に基づく: ajax 呼び出し後に目立たない検証を更新する

//jQuery plugin for updating unobtrusive validation when forms are loaded using Ajax
(function ($) {
    $.fn.updateValidation = function () {
        //If the form has been loaded via ajax, then we have to update the 
        //unobtrusive validation            
        var $this = $(this);
        var form = $this.closest("form")
            .removeData("validator")
            .removeData("unobtrusiveValidation");

    $.validator.unobtrusive.parse(form);
    return $this;
    };
})(jQuery);
4

1 に答える 1

0

あなたの2つの目標を理解しているかどうかはよくわかりません：

  1. ユーザーがサーバー側のエラー メッセージでフィールドを変更すると、フィールドの横にある検証エラーがクリアされます (サーバー側で確認できないため、変更されたものは何でも)
  2. 検証の凡例は、検証が失敗したときに表示され、無効なフィールドがすべてクリアされたときに非表示になります。

ただし、サーバー側のアクションが実際にサーバー エラー コード (おそらく HTTP 500 内部サーバー エラー メッセージ) を返す限り、コールバックで行ったのと同じようerrorに、呼び出しにコールバックを追加する必要があります。 . すべてのページの AJAX アクティビティのエラー ハンドラーをアタッチするために使用することもできます。$.ajaxsuccessajaxError

既存の検証エラーをクリアしようとしている場合 (質問 1 は、これを実行しようとしているように聞こえます)、resetまたはresetFormメソッドが必要です。

$form.ajaxSubmit({
        target: $target,
        success: function () {
            //...
        },
        error: function() {
            $form.validate().resetForm();
        }
    });

これは必要なコードの大まかな推測にすぎませんが、ここから推定できることを願っています。やりたいことをもう少し説明していただければ、より具体的にしようと思います。

于 2013-09-18T17:14:04.857 に答える