Question

有人可以帮助我。我无法让我的jQuery ui对话框进行验证。我试图在这个网站和无数其他网站上找到一个解决方案但是虽然每个人似乎都有某种解决方案，但我无法让它们中的任何一个工作。我知道有时候很难描述一个问题所以我编写了一个完整的应用程序，其中包含了希望清楚地表达的最低要求。在VIEW中，有一个警报（“已保存”）;我不希望看到，因为Dialog应该防止这种情况发生。我们非常感激地收到任何建议。

CONTACTMESSAGE

using System.ComponentModel.DataAnnotations;

namespace TestValidation.Models
{
  public class ContactMessage
  {
    [Required(ErrorMessage = "Message is Requried")]
    public string Message { get; set; }
  }
}

控制器：

    namespace TestValidation.Controllers
    {
      public class HomeController : Controller
      {
        public ActionResult Index()
        {
          return View();
        }

        public ActionResult Edit()
        {
          return PartialView("MessageForm", 
            new ContactMessage{Message="Test"});
        }

        public ActionResult Save()
        {
          return Content("Saved");
        }
      }
    }

查看：

@model TestValidation.Models.ContactMessage
@{
  Layout = null;
}
<!DOCTYPE html>
<html>
<head>
  <title>ViewPage1</title>
  <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="Stylesheet" type="text/css" />
  <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
  <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
  <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
</head>
<body>
  <a href="#" id="editButton">Dialog</a>
  <div id="Placeholder" title=""></div>
</body>
</html>
<script type="text/javascript">

  $(function () {

    $("#Placeholder").dialog({
      autoOpen: false, width: 400, height: 330, modal: true,
      buttons: {
        "Save": function () {
          $.post("/Home/Save",
                 $("#EditForm").serialize(),
                 function (data) {
                   alert("saved");
                   $("#Placeholder").dialog("close");
                 });
        },
        Cancel: function () { $(this).dialog("close"); }
      }
    });

    $("#editButton").click(function () {
      $("#Placeholder").html("")
                .dialog("option", "title", "Edit Message")
                .load("/Home/Edit/", function () {
                  $("#Placeholder").dialog("open");
                });

    });
  });

</script>

部分视图：

@model TestValidation.Models.ContactMessage
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
@using (Html.BeginForm("null", "null", FormMethod.Post, new { id = "EditForm" }))
{
  @Html.ValidationSummary(true)

 <div class="editor-label">
    @Html.LabelFor(model => model.Message)
  </div>
  <div class="editor-field">
    @Html.EditorFor(model => model.Message)
    @Html.ValidationMessageFor(model => model.Message)
  </div>
}

Answer 1

将表单加载到DOM后立即执行此操作

jQuery.validator.unobbstrusive.parse(jQuery('#EditForm'));

带有PartialView的jQuery ui Dialog不会验证（MVC3）

1 个答案: