MVC 客户端验证在局部视图中不起作用

Question

我有一个局部视图，它填充在我的 MVC 项目主页的模态主体中。部分视图包含如下登录表单 -

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

<div class="row">
    <div class="col-xs-6">
        <div class="well">
            <div class="form-horizontal">
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <div class="form-group">
                    <div class="col-md-12">
                        @Html.LabelFor(model => model.UserEmailId, htmlAttributes: new { @class = "control-label" })
                        @Html.EditorFor(model => model.UserEmailId, new { htmlAttributes = new { @class = "form-control", placeholder = "example@gmail.com" } })
                        @Html.ValidationMessageFor(model => model.UserEmailId, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-12">
                        @Html.LabelFor(model => model.UserPassword, htmlAttributes: new { @class = "control-label" })
                        @Html.EditorFor(model => model.UserPassword, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.UserPassword, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" name="remember" id="remember"> Remember login
                    </label>
                </div>
            </div>
            <button type="button" class="btn btn-success btn-block" onclick="location.href='@Url.Action("Login", "Home")'">
                Login
            </button>
        </div>
    </div>
    <div class="col-xs-6">
        <p class="lead">Sign up with</p>
        <ul class="list-unstyled" style="line-height: 2">
            <li><span class="fa fa-check text-success"></span> See all your orders</li>
            <li><span class="fa fa-check text-success"></span> Fast re-order</li>
            <li><span class="fa fa-check text-success"></span> Save your favorites</li>
            <li><span class="fa fa-check text-success"></span> Fast checkout</li>
            <li><span class="fa fa-check text-success"></span> Get a gift <small>(only new customers)</small></li>
            <li><a href="/read-more/"><u>Read more</u></a></li>
        </ul>
    </div>
</div>
}

我正在使用部分类来定义我的模型数据验证（这样如果我更新我的数据库优先模型，它们就不会被遗漏）-

public class UserMetadata
{
    [Display(Name ="Username")]
    [EmailAddress(ErrorMessage ="Please enter your email address")]
    [Required(ErrorMessage ="Required field")]
    public string UserEmailId { get; set; }

    [Display(Name ="Password")]
    [DataType(DataType.Password)]
    [Required(ErrorMessage = "Username is required")]
    [StringLength(15, ErrorMessage = "Must be between 8 and 15 characters", MinimumLength = 8)]
    public string UserPassword { get; set; }
}

验证在客户端不起作用。他们没有被触发。我是否缺少一些脚本参考？

我已经在 web.config 中将 "ClientValidationEnabled" 设置为 true。请帮忙。谢谢！

编辑 - 以下全部包含在我的布局中-

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/2d83329334.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
 @Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

Answer 1

您好，请查看以下代码以供参考

1.型号

     public class UserMetadata
    {
        [Display(Name = "Username")]
        [EmailAddress(ErrorMessage = "Please enter your email address")]
        [Required(ErrorMessage = "Required field")]
        public string UserEmailId { get; set; }

        [Display(Name = "Password")]
        [DataType(DataType.Password)]
        [Required(ErrorMessage = "Username is required")]
        [StringLength(15, ErrorMessage = "Must be between 8 and 15 characters", MinimumLength = 8)]
        public string UserPassword { get; set; }
    }

2。控制器

   public class UserDataController : Controller
{
    // GET: Contacts/UserData
    public ActionResult Index()
    {
        var userData = new UserMetadata();

        return View(userData);
    }
}

查看和Javascript

 @model UserMetadata
   @{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
 }

    <h2>Index</h2>

    @using (Html.BeginForm())
    {
     <div class="row">
     <div class="col-xs-6">
     <div class="well">
        <div class="form-horizontal">
            @Html.ValidationSummary(true, "", new { @class = "text-    danger" })
            <div class="form-group">
                <div class="col-md-12">
                    @Html.LabelFor(model => model.UserEmailId,   htmlAttributes: new { @class = "control-label" })
                    @Html.EditorFor(model => model.UserEmailId, new { htmlAttributes = new { @class = "form-control", placeholder = "example@gmail.com" } })
                    @Html.ValidationMessageFor(model => model.UserEmailId, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-12">
                    @Html.LabelFor(model => model.UserPassword, htmlAttributes: new { @class = "control-label" })
                    @Html.EditorFor(model => model.UserPassword, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.UserPassword, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="remember" id="remember"> Remember login
                </label>
            </div>
            <button type="button" class="btn btn-success btn-block" onclick="loginUser();">
                Login
            </button>
        </div>
        </div>
    </div>
</div>
        }
     <script>
      function loginUser()
     {
       if($('form').valid())
     {
    //redirect to some action like         window.location=somerootPath+/login/home
}
    else
   {
    //not valid
   }
 }

输出

确保加载突出显示的 js 除了 jquery UI.

Answer 2

一种解决方法是：

在 html 编辑器中添加 'required' 字段如下

@Html.EditorFor(model => model.UserEmailId, new { htmlAttributes = new { @class = "form-control", placeholder = "example@gmail.com",@required="required" } })

不需要 Html.ValidationMessageFor()。

MVC 客户端验证在局部视图中不起作用

MVC Client side validation are not working in partial view

asp.net-mvc

partial-views

view

data-annotations

asp.net-mvc-4