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编辑器中添加＆＃39; required＆＃39;字段如下

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

并且不需要Html.ValidationMessageFor（）。

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

2 个答案: