使用 KnockoutJS 和 Jquery 对话框时 jQuery 验证失败

Question

我有一个在 MVC3 中使用 html.RenderAction 呈现的表单。

除此之外，我还有一个用于淘汰赛的 jquery 模板。使用默认的“data-val-required”属性将模型正确渲染到视图中。

但是我注意到 jQuery 验证总是返回 true。

<div id="dlgAdd" data-bind="template: { name: 'editTemplate', data: selected }">
</div>
<script id="editTemplate" type="text/html">  
<div> 
@{
    Html.RenderAction("EditDialog");
}
</div>    
</script>

EditDialog 部分呈现如下输出：

 <form method="post" id="frmAddNew" action="/Project/AddNew"> 
    <div class="fields-inline">         
       <div class="editor-label">             
          <label for="Name">Name</label>         
       </div>         

       <div class="editor-field">
          <input data-val="true" data-val-required="The Name field is required." id="Name" name="ko_unique_41" value="" type="text">
          <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
       </div>
    </div>
    <span id="validationmessage" class="field-validation-error"></span>   
  </form>

但是，当我调用$("#frmAddNew").valid()) 时，它总是返回“true”。 我不知道是它的淘汰赛、jQuery 还是 mvc 阻止了验证返回 false。

Answer 1

尝试调用$.validator.unobtrusive.parse(yourFormElement) 以获取与验证相关的data- 属性解析。

你可以像这样触发它：

<div id="dlgAdd" data-bind="template: { name: 'editTemplate', data: selected, afterRender: hookUpValidation  }">
</div>

那么，hookUpValidation 将如下所示：

hookUpValidation: function(nodes) {
    $.validator.unobtrusive.parse(nodes[0]);
}

Answer 2

我查看了 jQuery validate 的代码，我认为它不适用于动态添加的表单（Knockout 所做的）。

看看这个>Jquery Validation Plugin, dynamic form validation

您需要在使用 jQuery live() 方法注册的事件处理程序中调用 validate() 方法。 live 方法也链接到所有动态添加的元素。

让我知道它是否有效。