MVC 非侵入式验证。如何使用 toastr 消息插件显示验证消息

Question

我有简单的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，如果它无效 - 在消息 window:

中显示消息

<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 个提交，一个接一个。如何防止第二次提交或如何覆盖标准验证过程？

Answer 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>

Answer 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

MVC 非侵入式验证。如何使用 toastr 消息插件显示验证消息

MVC Unobtrusive Validation. How to display validation message with toastr message plugin

validation

asp.net-mvc

jquery

unobtrusive-validation