asp.net MVC 不显眼的浏览器错误

Question

我正在尝试使用不显眼的 Jquery 在客户端进行验证，但出了点问题。 错误如附图：

这是我的代码：

*在 BundleConfig.cs 中

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*", "~/Scripts/jquery.unobtrusive*"));

*在母版页中：

<script src="~/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>

*在视图模型类中：

public class EmployeeViewModel
    {
        public int? EmployeeId { get; set; }

        [MaxLength(length: 10, ErrorMessage = "First name can't be more than 10 charechers")]
        [Required(AllowEmptyStrings = false, ErrorMessage = ("First name is required!"))]
        public string FirstName { get; set; }

        [MaxLength(length: 10, ErrorMessage = "First name can't be more than 10 charechers")]
        [Required(AllowEmptyStrings = false, ErrorMessage = ("Last Nmae is required!"))]
        public string LastName { get; set; }

        [MaxLength(length: 20)]
        public string FullName { get; set; }

        [Range(500, 1500, ErrorMessage = "Salare must be between 500 DK and 1500 DK")]
        [Required(AllowEmptyStrings = false, ErrorMessage = ("Salary is required!"))]
        public double Salary { get; set; }

        [EmailAddress(ErrorMessage = "Invalid Email")]
        [Required(AllowEmptyStrings =false,ErrorMessage =("Email is required!"))]
        public string Email { get; set; }
        public bool IsMarriage { get; set; } = false;
        public string Gender { get; set; }
        public string DepartmentName { get; set; }

        [Required(AllowEmptyStrings = false,ErrorMessage ="Birth day is required")]
        //[DataType(DataType.Date)]
        public DateTime? BirthDate { get; set; }

        public TimeSpan? StartWorkingTime { get; set; }

        public TimeSpan? EndWorkingTime { get; set; }
        public int? DepartmentId { get; set; }
    }

*在视图中：

@using (Html.BeginForm("Save","Employee",FormMethod.Post))
    {
        <div class="form-group ">
            <div class="row">
                <div class="col-md-2 col-form-label">
                    @Html.LabelFor(e => e.FirstName, "First Name")
                </div>
                <div class="col-md-10">
                    @Html.TextBoxFor(e => Model.FirstName, new { @class = "form-control" })
                    @Html.ValidationMessageFor(e => e.FirstName, "", new { @class = "text-danger text-left" })
                </div>

            </div>

        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-md-2">
                    @Html.LabelFor(e => e.LastName, "Last Name")
                </div>
                <div class="col-md-10">
                    @Html.TextBoxFor(e => Model.LastName, new { @class = "form-control" })
                    @Html.ValidationMessageFor(e => e.LastName, "", new { @class = "text-danger text-left" })
                </div>
            </div>
        </div>


}

**客户端验证不起作用的问题，但服务器端工作正常

Answer 1

我认为您的MaxLength属性语法可能存在问题。 应该是

[MaxLength(10, ErrorMessage = "名字不能超过 10 个字符。")]

但是对于客户端验证，您应该尝试将其替换为StringLength属性，而不是使用MaxLength属性。

[StringLength(10, ErrorMessage = "First name can't be more than 10 charecers.")] [Required(AllowEmptyStrings = false, ErrorMessage = ("First name is required!"))]
公共字符串名字 { 得到; 放; }

Answer 2

我知道这是一个已有一年历史的问题，但可能会帮助可能来这里寻找答案的人。 首先，发问者没有完整贴出代码，所以很难得出错误的确切原因（什么是未定义的）。 我没有看到定义表单输入规则和消息的 jquery 客户端验证规则。 除了他所做的，他还需要有客户端验证规则如下：这个例子是一个简单的注册表单，它包括电子邮件、密码和确认密码作为文本输入。代码如下：

$('#registerFormId').validate({  
    errorClass: 'help-block animation-slideDown', 
    // You can change the animation class for a different entrance animation - check 
     animations page  
    errorElement: 'div',  
    errorPlacement: function (error, e) {  
        e.parents('.form-group > div').append(error);  
    },  
    highlight: function (e) {  

        $(e).closest('.form-group').removeClass('has-success has-error').addClass('has-error');  
        $(e).closest('.help-block').remove();  
    },  
    success: function (e) {  
        e.closest('.form-group').removeClass('has-success has-error');  
        e.closest('.help-block').remove();  
    },  
    rules: {  
        'Email': {  
            required: true,  
            email: true  
        },  

        'Password': {  
            required: true,  
            minlength: 6  
        },  

        'ConfirmPassword': {  
            required: true,  
            equalTo: '#Password'  
        }  
    },  
    messages: {  
        'Email': 'Please enter valid email address',  

        'Password': {  
            required: 'Please provide a password',  
            minlength: 'Your password must be at least 6 characters long'  
        },  

        'ConfirmPassword': {  
            required: 'Please provide a password',  
            minlength: 'Your password must be at least 6 characters long',  
            equalTo: 'Please enter the same password as above'  
        }  
    }  
});  

请确保您的文本输入名称应与您要验证的属性相同。 除此之外，请确保在 web.config 中启用客户端验证不引人注目，如下所示：

这是一篇优秀的博客文章，它解释了如何使用 jquery 非干扰性验证来实现客户端和服务器端验证。

https://www.c-sharpcorner.com/article/asp-net-mvc5-jquery-form-validator/#:~:text=Server%20side%20form%20validation%2C%20as,with%20ASP.NET% 20MVC5%20平台。

Asma Shaikh 注意：以上博文不是我写的