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");

    }

编辑 我返回获取中使用的相同视图，因此行为与字段失败客户端即相同。该对话框包含一个表单，并且验证错误显示在字段旁边，就像其他错误一样。

现在，我不想关闭对话框，并且在对话框的顶部，我有一个使用此助手创建的验证图例：

    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

我不确定我是否了解您的两个目标：

  1. 当用户使用服务器端错误消息更改字段时，字段旁边的验证错误应清除（无论更改为什么，因为我无法在服务器端检查它）
  2. 验证图例应在任何验证失败时显示，并在清除所有无效字段时隐藏。

但是，只要您的服务器端操作实际上返回服务器错误代码（可能是 HTTP 500 内部服务器错误消息），您要做的就是在调用中添加error回调$.ajax，就像您对success回调所做的那样. 您还可以使用ajaxError为所有页面的 AJAX 活动附加错误处理程序。

如果您正在尝试清除现有的验证错误（问题 1 听起来您正在尝试这样做），您需要resetorresetForm方法：

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

这只是对您需要的代码的粗略猜测，但希望您可以从这里推断出来。如果您再解释一下您想要做什么，我会尝试更具体。

于 2013-09-18T17:14:04.857 回答