MVC 不显眼的验证。如何使用 toastr 消息插件显示验证消息答案

【问题标题】：MVC Unobtrusive Validation. How to display validation message with toastr message pluginMVC 不显眼的验证。如何使用 toastr 消息插件显示验证消息
【发布时间】：2016-10-05 16:23:24
【问题描述】：

我有简单的 Ajax 表单

@using (Ajax.BeginForm("SignUpForFree", null, new AjaxOptions()
    {
        InsertionMode = InsertionMode.Replace
    }, new { id = "signup-form" }))
    {
        @Html.LabelFor(m => m.Email)
        @Html.TextBoxFor(m => m.Email)
        <input type="submit" value="CREATE FREE ACCOUNT" onclick="customSubmit()"/>
    }

和 JS 验证表单，如果它无效 - 在消息窗口中显示消息：

<script type="text/javascript">
        function customSubmit() {
            var form = $("#signup-form");
            if (!ValidateForm(form))
                return;
            $.ajax({
                type: 'POST',
                url: "@Url.Action("SignUpForFree")",
                data: form.serialize()
            });
        }
    </script>
function ValidateForm(form) {
    $.validator.unobtrusive.parse(form);
    var validator = form.validate();
    if (!form.valid()) {
        //some code here to display error message
        return false;
    }
    return true;
}

但是当我提交表单时 - 我有 2 次提交，这些都一一发生。如何防止第二次提交或如何覆盖标准验证流程？

【问题讨论】：

标签： jquery asp.net-mvc validation unobtrusive-validation

【解决方案1】：

我没有测试代码，所以不确定它是否可以编译。但下面应该给你一个想法。我还假设您已经在 bundleconfig.cs 中包含了 toastr.js

@using (Ajax.BeginForm("SignUpForFree", null, new AjaxOptions()
    {
        InsertionMode = InsertionMode.Replace, OnSuccess = "customSubmitSuccess(data)"
    }, new { id = "signup-form" }))
    {
        @Html.LabelFor(m => m.Email)
        @Html.TextBoxFor(m => m.Email)
        <input type="submit" value="CREATE FREE ACCOUNT" />
    }

<script type="text/javascript">

        function customSubmitSuccess(result) {
            if (result.success) {
                // do something when it is success
            } else {
                var formErrors = [];
                $.each(result.errors, function (key, val) {
                    var container = $('span[data-valmsg-for="' + key + '"]');
                    container.removeClass("field-validation-valid").addClass("field-validation-error");
                    container.html(val[val.length - 1].ErrorMessage);

                    formErrors.push(key + "    :  " + val[val.length - 1].ErrorMessage);

                });
                toastr.error(formErrors.join(", "));
            }
        }

        $(function () {
            //allow validation framework to parse DOM
            $.validator.unobtrusive.parse('form');
        });
</script>

【讨论】：

感谢@sam 的帮助，但它对我不起作用。 OnSuccess 将在表单提交到服务器端并且验证失败后发生（this.ModelState.IsValid）。在这种情况下，我已经知道如何显示 toastr 消息。但我使用客户端验证并在提交之前验证表单。

【解决方案2】：

我找到了问题的答案。这是表格

@using (Ajax.BeginForm("SignUpForFree", null, new AjaxOptions()
    {
        InsertionMode = InsertionMode.Replace
    }, new { id = "signup-form" }))
    {
        @Html.LabelFor(m => m.Email)
        @Html.TextBoxFor(m => m.Email)
        <input type="submit" value="CREATE FREE ACCOUNT"/>
    }

这如何在验证失败时挂钩，并为此添加您自己的处理程序作为现有处理程序的附加：

<script type="text/javascript">
        $(document).ready(function () {
            $('#signup-form').bind('invalid-form.validate', function (form, validator) {
                showErrorMessagesOnValidate(validator.errorList);
            });
        });
    </script>

这个函数会显示带有验证错误的 toastr.js 消息：

showErrorMessagesOnValidate = function(errors) {
    if (!errors)
        return;
    var toastrObj = {
        ToastMessages: []
    };
    errors.forEach(function(item) {
        var label = $(item.element.labels[0]).text();
        var msg = {
            Title: label,
            Message: item.message,
            Type: "Warning"
        };
        toastrObj.ToastMessages.push(msg);
    });
    displayMessages(toastrObj);
}
function displayMessages(toastrObj) {
    $.each(toastrObj.ToastMessages, function (idx, msg) {
        toastr[msg.Type.toLowerCase()](msg.Message, msg.Title, {});
    });
}

感谢 CodeProject Modify jQuery validation settings using MVC unobtrusive validation 的文章

【讨论】：