jQuery Validate 不适用于 Ajax 和 jQuery 对话框

Question

在我的网站上，我有一个导航和一个主要内容区域。当您单击导航链接时，主内容区域内的内容总是通过 ajax 加载。如果单击“联系”链接，则会加载一个文本，其中包含一个包含联系表单的 jQuery 对话框的链接。

问题：当您加载网站并导航到联系表单区域时，验证工作正常。但是，如果您导航到另一个内容区域（= 通过 ajax 加载另一个内容），然后返回联系表单区域并单击提交按钮（中间不重新加载页面），验证失败，被忽略并且表单动作被执行。如果您重新加载页面，然后导航到联系表单区域，一切都会再次运行。

我无法理解这种行为。奇怪的是：验证内容区域中未在 jQuery 对话框中打开的另一个表单始终有效，无论您之前单击了什么。所以这一定是因为 jQuery 对话框弹出和 Ajax。谁能理解这个问题？

我的代码来了：

HTML：

<a href="#popup-form-test" id="open-popup-form-test">open form test popup</a>

<div id="popup-form-test">
    <form id="form-test" action="somelink">
        <input type="text" placeholder="testtext eingeben" name="testText"></input>
        <input type="submit" value="submit">
    </form>
</div>

JS：

var dialogTest = $("#popup-form-test").dialog({
        autoOpen: false,
        modal: true,
        close: function () {
            console.log('closed');
        }
    });

    $("#open-popup-form-test").on("click", function () {
        dialogTest.dialog("open");
    });

    $('#form-test').validate({
       debug: true,
        rules : {
            testText: {
                required: true
            }
        },
        submitHandler: function(form) {
            alert('submitted');
        }
    });

Answer 1

您必须使用 .dialog() 的 open 回调并在其中插入验证器：

var dialogTest = $("#popup-form-test").dialog({
    autoOpen: false,
    modal: true,
    open : function (event, ui) {
      $('#form-test').validate({
        debug: true,
        rules : {
          testText: {
            required: true
          }
        },
        submitHandler: function(form) {
           alert('submitted');
        }
      });
    },
    close: function () {
        console.log('closed');
    }
});

如果没有有效的示例，我无法测试，但它应该可以工作。