Jquery MVC不引人注目的验证。如何使用toastr消息插件显示验证消息

我有简单的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()"/>
    }

@使用（Ajax.BeginForm（“SignUpForFree”，null，new-AjaxOptions（））
{
InsertionMode=InsertionMode.Replace
}，新的{id=“注册表格”}）
{
@LabelFor（m=>m.Email）
@Html.TextBoxFor（m=>m.Email）
}

和验证表单的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;
}

函数customSubmit（）{
变量形式=$（“#注册形式”）；
如果（！ValidateForm（表单））
返回；
$.ajax({
键入：“POST”，
url:“@url.Action”（“SignUpForFree”）”，
数据：form.serialize（）
});
}
函数ValidateForm（表单）{
$.validator.unobtrusive.parse（表单）；
var validator=form.validate（）；
如果（！form.valid（））{
//这里有一些显示错误消息的代码
返回false；
}
返回true；
}

但是当我提交表格时，我有两个提交，一个接一个。

---

如何防止第二次提交或如何覆盖标准验证过程？

我没有测试代码，因此不确定代码是否编译。但是下面的内容应该会给你一个想法。我还假设您已经在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>

@使用（Ajax.BeginForm（“SignUpForFree”，null，new-AjaxOptions（））
{
InsertionMode=InsertionMode.Replace，OnSuccess=“CustomSubmitAccess（数据）”
}，新的{id=“注册表格”}）
{
@LabelFor（m=>m.Email）
@Html.TextBoxFor（m=>m.Email）
}
功能customSubmitSuccess（结果）{
如果（结果、成功）{
//当成功的时候做点什么
}否则{
var formErrors=[]；
$.each（result.errors，function（key，val）{
var container=$（'span[data valmsg for=“”+key+'”）；
container.removeClass（“字段验证有效”）.addClass（“字段验证错误”）；
html（val[val.length-1].ErrorMessage）；
formErrors.push（键+”：“+val[val.length-1].ErrorMessage）；
});
toastr.error（formErrors.join（“，”）；
}
}
$（函数（）{
//允许验证框架解析DOM
$.validator.unobtrusive.parse（'form'）；
});

我没有测试代码，因此不确定它是否编译。但是下面的内容应该会给你一个想法。我还假设您已经在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>

@使用（Ajax.BeginForm（“SignUpForFree”，null，new-AjaxOptions（））
{
InsertionMode=InsertionMode.Replace，OnSuccess=“CustomSubmitAccess（数据）”
}，新的{id=“注册表格”}）
{
@LabelFor（m=>m.Email）
@Html.TextBoxFor（m=>m.Email）
}
功能customSubmitSuccess（结果）{
如果（结果、成功）{
//当成功的时候做点什么
}否则{
var formErrors=[]；
$.each（result.errors，function（key，val）{
var container=$（'span[data valmsg for=“”+key+'”）；
container.removeClass（“字段验证有效”）.addClass（“字段验证错误”）；
html（val[val.length-1].ErrorMessage）；
formErrors.push（键+”：“+val[val.length-1].ErrorMessage）；
});
toastr.error（formErrors.join（“，”）；
}
}
$（函数（）{
//允许验证框架解析DOM
$.validator.unobtrusive.parse（'form'）；
});

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

@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"/>
    }

---

感谢CodeProject的文章

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

@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"/>
    }

---

感谢CodeProject的文章

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