javascript - asp.net mvc 中的客户端验证

Question

我对 ASP.NET MVC 还很陌生。我在将客户端验证错误附加到 MVC 中的验证摘要列表时遇到问题。在客户端提交点击函数中，即使表单存在验证错误，validation-summary-errors div也始终为空。

让我用代码片段详细解释一下。我提供的代码片段是我的示例应用程序。

我已经通过 web.config 在我的应用程序中启用了客户端验证，并在我的布局页面中包含了默认的 jquery 验证库。

@Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/jqueryval")

MVC View

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()

    <fieldset>
        <legend>Registration Form</legend>
        <ol>
            <li>
                @Html.LabelFor(m => m.UserName)
                @Html.TextBoxFor(m => m.UserName)
            </li>
            <li>
                @Html.LabelFor(m => m.Password)
                @Html.PasswordFor(m => m.Password)
            </li>
            <li>
                @Html.LabelFor(m => m.ConfirmPassword)
                @Html.PasswordFor(m => m.ConfirmPassword)
            </li>
        </ol>
        <input type="submit" value="Register" id="btnSubmit" />
    </fieldset>
}

查看模型如下

public class RegisterModel
    {
        [Required]
        [Display(Name = "User name")]
        public string UserName { get; set; }

        [Required]
        [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
        [DataType(DataType.Password)]
        [Display(Name = "Password")]
        public string Password { get; set; }

        [DataType(DataType.Password)]
        [Display(Name = "Confirm password")]
        [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
        public string ConfirmPassword { get; set; }
    }

我使用的脚本文件如下。

<script type="text/javascript">
    $(function () {
        $("#btnSubmit").click(function (e) {
            e.preventDefault();            
            var errorSummary = $('.validation-summary-errors');
            if (errorSummary.length == 0) {
                $('#listError').remove();
                $('<div class="validation-summary-errors"></div>').insertAfter($('.validation-summary-valid'));
                $(".validation-summary-errors").append("<ul id='listError'><li>You cannot enter more than 20 characters.</li></ul>");
            }
            else if (errorSummary.length == 1) {
                $('#listError').remove();
                $(".validation-summary-errors").append("<ul id='listError'><li>You cannot enter more than 20 characters.</li></ul>");
            }
            return false;
        });

    });

</script>

当我没有 jquery 提交点击功能时，一切都按预期正常工作。模型验证在提交点击时在客户端触发。

除了模型验证之外，我还有一些 jquery 客户端验证需要附加到现有的验证摘要列表中。但是“validation-summary-errors”div在提交点击功能中始终为空。所以每次 $('.validation-summary-errors').length 都是 0。

有人可以帮我理解我哪里出了问题吗？

更新代码

$(function () {
    $("#btnSubmit").click(function (e) {

        var IsValid = validateForms();
        if (!IsValid) {
            e.preventDefault();
        }
    });
});

function validateForms() {

    var blnValid = false;
    var valMsg = ValidateDynamicControls();

    if ($('#MemberForm').valid()) {
        $(".validation-summary-errors").empty();
        blnValid = true;
    }
    if (valMsg != '') {

        blnValid = false;
        var errorSummary = $('.validation-summary-errors')
        if (errorSummary.length == 1 && errorSummary[0].innerHTML != '' &&    errorSummary[0].innerHTML != undefined) {
            $(".validation-summary-errors ul").append(valMsg);
        } else {

            $('#listError').remove();
            $('<div class="validation-summary-errors"></div>').insertAfter($('.validation-summary-valid'));
            $(".validation-summary-errors").append("<ul id='listError'>" + valMsg + "</ul>");
        }
    }

    return blnValid;
}

function ValidateDynamicControls() {
    var strAliasValMsg = 'The string is not valid.';

    return strAliasValMsg;
}

Answer 1

我愿意跟你打赌，你的 e.preventDefault(); 和 return false; 是你问题的根源自 they are suppressing propagation of the event. jquery 验证库永远不知道表单已提交，因为您在处理事件之前终止了该事件。

此外，you don't need both preventDefault and return false 。事实上，您并不总是需要其中任何一个 - 在您的情况下，调用 preventDefault 并有条件地执行它可能会更合适。

但实际上，这可能还不够。如果包含的验证器不够，您真正应该做的是实现 CustomValidationAttribute 以及 IClientValidatable 接口(interface)。这将使客户端和服务器端的一切都运行良好。您可以通过 Google 或 Stackoverflow 搜索找到很多示例，like this one ， 例如。或者，您可以实现 Remote Validator如果第一个解决方案不能胜任任务。