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

时间:2016-09-13 07:19:50

标签: asp.net-mvc asp.net-mvc-4 view data-annotations partial-views

我有一个局部视图,它被填充在我的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")

2 个答案:

答案 0 :(得分: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);
    }
}
  1. 查看和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
       }
     }
    

  2. 输出
  3. enter image description here

    确保加载突出显示的js,但jquery UI除外。

答案 1 :(得分:1)

解决方案之一是:

在html编辑器中添加&#39; required&#39;字段如下

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

并且不需要Html.ValidationMessageFor()。