使用 jquery 验证插件验证模式弹出窗口内的用户输入答案

【问题标题】：validating user input inside modal popup using jquery validation plugin使用 jquery 验证插件验证模式弹出窗口内的用户输入
【发布时间】：2017-01-31 18:11:52
【问题描述】：

我正在尝试在 jquery UI 模式对话框中验证用户输入。使用jquery验证插件进行验证。

尝试在弹出按钮单击中验证验证

<form id="frm">
    <div>
        <button name="btn" id="btn" type="button" >OpneModal</button>
    <div id="dlg" style="display:none">
        <div>
            Name: <input type="text" id="txtName" name="txtName"/>
        </div>
        <div>
        </div>
        </div>
        </div>
    </form>


 $(
     function () {
           var rules = {
            txtName: {
                required: true
            }
        };
        var messages = {
            txtName: {
                required: "Please enter name"
            }
        };
       $("#frm").validate({rules:rules, messages:messages});


          $("#btn").click(
              function () {

                  $("#dlg").dialog(
                      {
                          modal: true,
                          buttons: {
                              "Save": function () {
                                alert(  $("#frm").valid());
                              },
                              "Cancel": function () {
                                  $("#dlg").dialog("close");
              }
                          }

                      }
                      );
              }
              );

      });

但是验证总是成功的。

代码在 js fiddle:http://jsfiddle.net/aGJrZ/6/

【问题讨论】：

jsFiddle 中的 HTML 无效。它至少缺少两个结束 div 标签：</div>。
@Sparky，更正并更新了添加到问题中的小提琴和整个代码

标签： jquery jquery-validate jquery-ui-dialog

【解决方案1】：

jQuery 验证插件要求所有输入元素必须包含在一组<form></form> 标记中。但是，使用 DOM 检查器，您可以看到在构建对话框时，它完全位于 <form></form> 之外。

重构 HTML 以便将form 包含在在您的对话框中...

<button name="btn" id="btn" type="button">Open Modal</button>
<div id="dlg" style="display:none">
    <form id="frm">
        <div>
            Name:  <input type="text" id="txtName" name="txtName" />
        </div>
    </form>
</div>

演示：http://jsfiddle.net/aGJrZ/9/

【讨论】：