asp.net-mvc - form.valid() 不适用于 MVC 中的 .js 文件

Question

我有一个 .js 文件，在 mvc 表单提交单击时调用该文件。在该 .js 文件函数中，我尝试在将 ajax 发布到 Controller 之前验证表单

我还在 .js 文件顶部引用了以下脚本文件，如下所示:-

    /// <reference path="~/Scripts/jquery-1.9.1.js" />
    /// <reference path="~/Scripts/jquery-ui-1.10.0.js" />
    /// <reference path="~/Scripts/jquery.unobtrusive-ajax.js" />
    /// <reference path="~/Scripts/jquery.validate.js" />
    /// <reference path="~/Scripts/jquery.validate.unobtrusive.js" />

  save = function() {    
      var form = $("#formID");
      var result1 = $("#formID").validate();
      var result = $("#formID").valid();
      if (result === true) {
     $.ajax({ 
                url: whatever the url,
                data: form.serialize(),
                type: 'POST',
                ...............
                ..........
           });
    }
  }

我的 View 是强类型的，并且模型类具有所有数据注释。

在我的场景中，我有一个最初加载所有数据的表单，并且我正在尝试清除所有必需的字段数据并尝试提交，以便我可以看到验证。当表单加载时，我可以看到带有所有数据属性的 html，如下所示。

<input class="custom" data-val="true" data-val-required="First Name is required." id="txtFirstName" name="Form1[0].FirstName" placeholder="First Name" title="First Name" type="text" value="robert">

我总是得到“结果 === true”，这就是为什么它会使用 ajax post 到 Controller 并且它会中断。(我将来将进行服务器端验证以避免这种情况)

令人惊讶的是，即使我清除了“名字”字段中的数据，我仍然看到 value="robert"在那里......这是一个问题吗？

我不知道为什么这不起作用。

Answer 1

1 首先使用“Chrome Developer Tool(CDT)”进行客户端调试

2 在下面提到的行上放置一个断点

3 然后在 CDT 中输入以下代码，它将显示该字段是什么，以及失败的验证

**$.data($('form')[0], 'validator').errorList**
[
Object
element: input#FirstName.text-box single-line input-validation-error
message: "The FirstName field is required."
__proto__: Object

1. 下面的工作代码

   $(function () {
       // Handler for .ready() called.
       $('#mycustomsubmitbutton').click(function () {
           var $form = $('form').first();
           var result = $form.valid();
           // Put you break point in the below if condition
           if (result === true) {
               alert("form valid");
           } else {
               alert("invalid form");
           }
       });
   
   });
   

   @using (Html.BeginForm()) { @Html.ValidationSummary(true) 员工

       <div class="editor-label">
           @Html.LabelFor(model => model.FirstName)
       </div>
       <div class="editor-field">
           @Html.EditorFor(model => model.FirstName)
           @Html.ValidationMessageFor(model => model.FirstName)
       </div>
   
       <p>
           <input id="mycustomsubmitbutton" type="button" value="Valid the form and make an Ajax request" />
       </p>
   </fieldset>
   

   }