Asp.NET MVC 客户端验证不工作

Question

每当我提交表单而不输入必填字段而不是立即给出客户端验证错误时，它都会转到允许提交表单的 Httppost Actionresult Index 方法。 往返服务器端后出现错误。 我添加了 jquery.validate.js 和 unobtrusive.js 这两个库的引用，还在 web.config 中设置了 ClientValidationEnabled 和 UnobtrusiveJavaScriptEnabled 值为 true。 我们将不胜感激您的帮助

HTML：

  @model binaryquest.web.CustomModels.ContactVM
@{
    ViewBag.Title = "Home Page";
}

<div id="contact" class="form">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h2>CONTACT</h2>
                <ul class="list-unstyled li-space-lg">
                    <li class="address">Don't hesitate to give us a call or just use the contact form below</li>
                    
                </ul>
            </div> <!-- end of col -->
        </div> <!-- end of row -->
        <div class="row">
            <div class="col-lg-8 offset-lg-2">

                <!-- Contact Form -->
                
                <form action="/Home/Index" method="post">
                    @Html.AntiForgeryToken()
                    @Html.ValidationMessage("expired", new { @class = "text-danger" })
                    @Html.ValidationMessage("CaptchaFail", new { @class = "text-danger" })

                    <div class="form-group">
                        @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "required" })
                        @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "required" })
                        @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Message, htmlAttributes: new { @class = "required" })
                        @Html.EditorFor(model => model.Message, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Message, "", new { @class = "text-danger" })
                    </div>

                    <div class="form-group checkbox">
                        <input type="checkbox" id="cterms" value="Agreed-to-Terms" required>I have read and agree to Leno's stated conditions in <a href="/Home/PrivacyPolicy">Privacy Policy</a>.
                        <div class="help-block with-errors"></div>
                    </div>

                    @Html.CheckBoxFor(model => model.IsTermsAccepted, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.LabelFor(model => model.IsTermsAccepted, htmlAttributes: new { @class = "required" })
                    @Html.ValidationMessageFor(model => model.IsTermsAccepted, "", new { @class = "text-danger" })

                    <div class="form-group">
                        <button type="submit" class="form-control-submit-button">SUBMIT MESSAGE</button>
                    </div>

                    <div class="form-message">
                        <div id="cmsgSubmit" class="h3 text-center hidden"></div>
                    </div>

                </form>
                <!-- end of contact form -->

            </div> <!-- end of col -->
        </div> <!-- end of row -->
    </div> <!-- end of container -->
</div>

@section scripts{

    
    <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.js"></script>

    
}

MODEL：

public class ContactVM
    {
        [Required(ErrorMessage = "You must provide Name")]
        [DisplayName("Name")]
        public string Name { get; set; }

        
        [Required(ErrorMessage = "You must provide an Email address")]
        [DisplayName("Email")]
        [EmailAddress]
        public string Email { get; set; }

        [Required(ErrorMessage = "You must provide Message")]
        [DisplayName("Your Message")]
        public string Message { get; set; }


        [Display(Name = "Terms and Conditions")]
        [Range(typeof(bool), "true", "true", ErrorMessage = "You must accept the terms and conditions!")]
        public bool IsTermsAccepted { get; set; }
        
        

    }

CONTROLLER：

            public ActionResult Index()
            {
                return View();
            }

            [HttpPost]
            [AllowAnonymous]
            [ValidateAntiForgeryToken]
            public ActionResult Index(ContactVM model)
            {
               
                string sendGridKey ="";
                if (ModelState.IsValid)
                {
                    SendMail(model, sendGridKey);
                    return RedirectToAction("Thanks", "Home");
                }
    
                return View(model);
            }

Answer 1

您需要使用加载的 javascript。将以下内容添加到您的视图中：

<script>
$(document).ready(function() {
   $.validator.unobtrusive.parse($("#myForm"));
}

function onSubmit(e) {
  $("#myForm").validate(); // this will validate the form and show the validation messages
  if($("#myForm").valid()) {
     $("#myForm").submit(); // submits the form
  }
  // stop the postback
  e.preventDefault();
}
</script>

然后在您的表单元素上：

<form id="myForm" onsubmit="onSubmit();" action="/Home/Index">

Answer 2

似乎未加载验证脚本。 你加载了 _layout.cshtml 了吗？

@RenderSection("scripts", required: false)

并尝试在表单开头添加验证摘要

@Html.ValidationSummary(true, "", new { @class = "text-danger" })

Answer 3

每当我在没有输入必填字段的情况下提交表单而不是立即给出客户端验证错误时，它就会转到允许提交表单的 Httppost Actionresult Index 方法。 往返服务器端后，然后给出错误。 我添加了 jquery.validate.js 和 unobtrusive.js 两个库的引用，并在 web.config 中设置了 ClientValidationEnabled 和 UnobtrusiveJavaScriptEnabled 值。 我们将非常感谢您的帮助

HTML :

  @model binaryquest.web.CustomModels.ContactVM
@{
    ViewBag.Title = "Home Page";
}

<div id="contact" class="form">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h2>CONTACT</h2>
                <ul class="list-unstyled li-space-lg">
                    <li class="address">Don't hesitate to give us a call or just use the contact form below</li>
                    
                </ul>
            </div> <!-- end of col -->
        </div> <!-- end of row -->
        <div class="row">
            <div class="col-lg-8 offset-lg-2">

                <!-- Contact Form -->
                
                <form action="/Home/Index" method="post">
                    @Html.AntiForgeryToken()
                    @Html.ValidationMessage("expired", new { @class = "text-danger" })
                    @Html.ValidationMessage("CaptchaFail", new { @class = "text-danger" })

                    <div class="form-group">
                        @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "required" })
                        @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "required" })
                        @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Message, htmlAttributes: new { @class = "required" })
                        @Html.EditorFor(model => model.Message, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Message, "", new { @class = "text-danger" })
                    </div>

                    <div class="form-group checkbox">
                        <input type="checkbox" id="cterms" value="Agreed-to-Terms" required>I have read and agree to Leno's stated conditions in <a href="/Home/PrivacyPolicy">Privacy Policy</a>.
                        <div class="help-block with-errors"></div>
                    </div>

                    @Html.CheckBoxFor(model => model.IsTermsAccepted, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.LabelFor(model => model.IsTermsAccepted, htmlAttributes: new { @class = "required" })
                    @Html.ValidationMessageFor(model => model.IsTermsAccepted, "", new { @class = "text-danger" })

                    <div class="form-group">
                        <button type="submit" class="form-control-submit-button">SUBMIT MESSAGE</button>
                    </div>

                    <div class="form-message">
                        <div id="cmsgSubmit" class="h3 text-center hidden"></div>
                    </div>

                </form>
                <!-- end of contact form -->

            </div> <!-- end of col -->
        </div> <!-- end of row -->
    </div> <!-- end of container -->
</div>

@section scripts{

    
    <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.js"></script>

    
}

模型 ：

public class ContactVM
    {
        [Required(ErrorMessage = "You must provide Name")]
        [DisplayName("Name")]
        public string Name { get; set; }

        
        [Required(ErrorMessage = "You must provide an Email address")]
        [DisplayName("Email")]
        [EmailAddress]
        public string Email { get; set; }

        [Required(ErrorMessage = "You must provide Message")]
        [DisplayName("Your Message")]
        public string Message { get; set; }


        [Display(Name = "Terms and Conditions")]
        [Range(typeof(bool), "true", "true", ErrorMessage = "You must accept the terms and conditions!")]
        public bool IsTermsAccepted { get; set; }
        
        

    }

控制器：

            public ActionResult Index()
            {
                return View();
            }

            [HttpPost]
            [AllowAnonymous]
            [ValidateAntiForgeryToken]
            public ActionResult Index(ContactVM model)
            {
               
                string sendGridKey ="";
                if (ModelState.IsValid)
                {
                    SendMail(model, sendGridKey);
                    return RedirectToAction("Thanks", "Home");
                }
    
                return View(model);
            }

Answer 4

您可以访问下面的链接

https://www.tutorialsteacher.com/articles/enable-client-side-valiation-in-mvc

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/Scripts/jquery.validate.min.js")
@Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js")