Jquery 如何防止模式弹出窗口在表单出现验证错误时提交表单

我正在开发一个asp.net mvc5 web应用程序，我正在使用Bootstrap和WebGrid实现CRUD操作

现在，我的创建操作方法如下所示：-

 [HttpGet]
        public ActionResult Create()
        {
            var phone = new Phone();
            return PartialView("Create", phone);
        }


        // POST: /Phone/Create
        [HttpPost]
        public JsonResult Create(Phone phone)
        {
            if (ModelState.IsValid)
            {
                db.Phones.Add(phone);
                db.SaveChanges();
                return Json(new { success = true });
            }
            return Json(phone, JsonRequestBehavior.AllowGet);
        }

以及索引视图，该视图具有可打开弹出窗口的创建按钮：-

 <div class="pull-right col-lg-1">   
                <a class="btn btn-success" data-modal="" href="/Phone/Create" id="btnCreate">
                     <span class="glyphicon glyphicon-plus"></span>      
                </a>
            </div>
<div id='myModal' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
    </div>
</div>

@section scripts{
    @Scripts.Render("~/scripts/appjs/phones.js")
}

创建视图：-

  @model MvcBootstrapCrud.Models.Phone

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 class="modal-title">Add New Phone</h3>
    </div>


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

        <div class="modal-body">

            <div class="form-horizontal">
                <div class="form-group">
                    @Html.LabelFor(m => Model.Model, new { @class = "control-label col-sm-3" })
                    <div class="col-sm-9">
                        @Html.TextBoxFor(m => m.Model, new { @class = "form-control required" })
                        <div>
                            @Html.ValidationMessageFor(m => m.Model)
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(m => Model.Company, new { @class = "control-label col-sm-3" })
                    <div class="col-sm-9">
                        @Html.TextBoxFor(m => m.Company, new { @class = "form-control required" })
                        <div>
                            @Html.ValidationMessageFor(m => m.Company)
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(m => Model.Price, new { @class = "control-label col-sm-3" })
                    <div class="col-sm-9">
                        @Html.TextBoxFor(m => m.Price, new { @class = "form-control required" })
                        <div>
                            @Html.ValidationMessageFor(m => m.Price)
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <span id="progress" class="text-center" style="display: none;">
                <img src="/images/wait.gif" alt="wiat" />
                Wait..
            </span>

            <input class="btn btn-primary" type="submit" value="Save" />
            <button class="btn btn-warning" data-dismiss="modal">Close</button>
        </div>
    }
    <script>
        $("form").removeData("validator");
        $("form").removeData("unobtrusiveValidation");
        $.validator.unobtrusive.parse("form");
    </script>

我面临的问题是，当显示CreateModel弹出表单时，用户将必填字段留空，验证错误将显示在[Required]数据注释中定义的字段旁边。但是，当用户单击“保存”按钮时，验证错误不会阻止弹出窗口提交表单，即使显示验证错误，也会调用创建后操作方法。。有人能就这件事发表意见吗？ 根据调用的$'form'，非常感谢。

。如果存在任何验证错误，valid应返回false。但是，在运行一些测试后，这有时会抛出一个未捕获的SyntaxError：意外标记u数据未定义的JSON.parsedata的结果。不知道为什么这只是偶尔发生。但是，您可以验证每个单独的元素，并防止ajax调用（如果任何调用无效）

$('form', dialog).submit(function () {
  var isValid = true; // assume all OK
  $('form').validate(); // perform validation on the form
  $('input[type="text"]').each(function (index, item) { // could change selector to suit e.g $('input, textarea').each(..            
    if (!$(this).valid()) {
      isValid = false; // signal errors
      return false; // break out of loop   
    }
  })
  if (!isValid) {
    return false; // exit
  }
  // Good to submit
  $('#progress').show();
    $.ajax({
      url: this.action,
      .....

根据调用的$'form'.valid，如果存在任何验证错误，则应返回false。但是，在运行一些测试后，有时会抛出未捕获的SyntaxError:Unexpected token u JSON.parsedata的结果，其中数据未定义。不知道为什么这只是偶尔发生。但是，您可以验证每个单独的元素，并防止ajax调用（如果任何调用无效）

$('form', dialog).submit(function () {
  var isValid = true; // assume all OK
  $('form').validate(); // perform validation on the form
  $('input[type="text"]').each(function (index, item) { // could change selector to suit e.g $('input, textarea').each(..            
    if (!$(this).valid()) {
      isValid = false; // signal errors
      return false; // break out of loop   
    }
  })
  if (!isValid) {
    return false; // exit
  }
  // Good to submit
  $('#progress').show();
    $.ajax({
      url: this.action,
      .....

请更改控制器PhoneController.cs

从

到

这为我解决了问题。

请更改控制器PhoneController.cs

从

到

---

这为我解决了这个问题。

在提交函数中，您可以尝试调用$'form'。valid，如果返回false，则取消它注意：您可能还需要调用。在调用之前对表单进行验证。validHaven没有机会进行测试，但在$'progress.show；-$之前形式验证；如果！$'form'.valid}{return false；}…刚刚做了一个快速测试-我无法使用if！$'form'.valid{..但是当我将选择器更改为特定控件if！$'MyControl'.valid{..它起作用了。我将在这个明天的答案上进行一些测试，以进行客户端验证。不确定为什么您得到的结果必须是有效的，才能返回{success:true}这意味着它应该运行if块，而不是else块-你确定“确切的代码”是正确的吗？但是你为什么要调用location.reload；无论如何-这有点违背了使用ajax的目的？在提交函数中，你可以尝试调用$'form'。valid，如果它返回false，那么取消它注意你可能还需要调用。在c之前对表单进行验证alling.validHaven没有机会进行测试，但在$'progress.show；-$'form.validate；if！$'form.valid}{return false；}…刚刚做了一个快速测试-我无法使用if！$'form.valid{..但是当我将选择器更改为一个特定的控件if！$'MyControl.valid时{..成功了。我将对这个明天的答案进行更多测试，以进行客户端验证。不确定为什么您得到的结果必须是有效的，才能返回{success:true}这意味着它应该运行if块，而不是else块-你确定这是“准确的代码”吗？但是你为什么调用location.reload；无论如何-这有点违背了使用ajax的目的？谢谢你的帮助。你的代码对我来说100%有效。但是如果你能提供建议的话，我有两个问题：第一，这是有效的推荐方法吗ate每个单独的元素并防止ajax调用（如果有无效的话）？或者最后我应该找到另一种方法？。第二个问题，您提到我不应该使用location.reload，因为它违背了使用ajax的目的，您是正确的，所以我应该显示一个对话框，例如“已成功添加您的记录”然后重新加载基础网格以获得包含添加项的网格？？我认为内部验证单个元素没有任何错误这就是jquery validate unobtrusive对标准提交所做的，按照我的方法，它与向导/多步骤表单的共同点是调用服务器在数据库然后在success函数中手动更新DOM，例如根据表单中的值添加一个新表行。或者让该方法返回一个包含新表行html的部分视图，并用它更新DOM。最后一个注意事项。Phone类有一个名为Model的属性。POST方法通常有符号公共ActionResult CreateMyClass模型，在您的情况下，绑定将失败，因为方法参数名称与属性名称相同。只是想让您知道：谢谢您的帮助。第一个问题，我是否

---

如果我正在验证单个元素，那么就不需要在我的脚本$'form.validate？这是正确的吗？谢谢你的帮助。你的代码100%适用于我。但我有两个问题，如果你能提出建议的话；首先，是否建议使用这种方法来验证每个单独的元素并防止ajax调用（如果任何调用无效）？或者最后我应该找到另一种方法？。第二个问题，您提到我不应该使用location.reload，因为它违背了使用ajax的目的，您是对的，所以我是否应该显示一个对话框，比如说“您的记录已成功添加”然后重新加载基础网格以获得包含添加项的网格？？我认为内部验证单个元素没有任何错误这就是jquery validate unobtrusive对标准提交所做的，按照我的方法，它与向导/多步骤表单的共同点是调用服务器在数据库然后在success函数中手动更新DOM，例如根据表单中的值添加一个新表行。或者，让该方法返回一个包含新表行的html的部分视图，并用它更新DOM。Phone类有一个名为Model的属性。POST方法具有签名公共ActionResult CreateMyClass模型是很常见的，在您的情况下，绑定将失败，因为方法参数名称与属性名称相同。只是想让你知道：谢谢你的帮助。第一个问题，如果我要验证单个元素，那么就不需要在我的脚本$'form'.validate？这是正确的吗？

$('form', dialog).submit(function () {
  var isValid = true; // assume all OK
  $('form').validate(); // perform validation on the form
  $('input[type="text"]').each(function (index, item) { // could change selector to suit e.g $('input, textarea').each(..            
    if (!$(this).valid()) {
      isValid = false; // signal errors
      return false; // break out of loop   
    }
  })
  if (!isValid) {
    return false; // exit
  }
  // Good to submit
  $('#progress').show();
    $.ajax({
      url: this.action,
      .....

       // POST: /Phone/Create
        [HttpPost]
        public JsonResult Create(Phone phone)
        {
            if (ModelState.IsValid)
            {
                db.Phones.Add(phone);
                db.SaveChanges();
                return Json(new { success = true });
            }
            return Json(phone, JsonRequestBehavior.AllowGet);
        }

        // POST: /Phone/Create
        [HttpPost]
        public ActionResult Create(Phone phone)
        {
            if (ModelState.IsValid)
            {
                db.Phones.Add(phone);
                db.SaveChanges();
                return Json(new { success = true });
            }
            return PartialView("Create", phone);
        }