Question

我在jquery ui对话框中显示了一个表单。我用ajax加载表单，然后使用ajax提交表单。

我现在有验证，检查字段是否唯一且只能在服务器端发生。

所以在我的Controller中，我向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加载表单后验证表单的代码。根据这个答案：Update unobtrusive validation after ajax call

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

Answer 1

我不确定我理解你的两个目标：

当用户使用服务器端错误消息更改字段时，字段旁边的验证错误应该清除（无论它是什么   改为自从我无法检查服务器端）

验证图例应显示何时验证失败，并应在所有验证时隐藏   无效字段已清除。

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

如果您要尝试清除现有的验证错误（问题1听起来像是您尝试执行此操作），则需要success或reset方法：

resetForm

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

如何在ajax调用后向unobtrusive验证添加服务器端错误

1 个答案: