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视图

@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; 是您问题的根源，因为它们抑制了事件的传播。 jQuery验证库永远不知道表单已提交，因为您在处理事件之前就将其杀死。

另外， 您既不需要preventDefault也可以return false 。 实际上，您并不需要一直都使用它-在您的情况下，更合适的是调用preventDefault并有条件地进行操作。

但实际上，这可能也不足够。 如果所包含的验证器还不够，那么您真正应该做的就是实现CustomValidationAttribute和IClientValidatable接口。 这将使客户端和服务器端的一切运行都很好。 您可以在Google或Stackoverflow搜索中找到很多示例，例如， 像这样的示例。 或者，如果第一个解决方案不能完成任务，则可以实现远程验证器 。