JQuery 无法验证从外部 HTML 文件调用的表单答案

【问题标题】：JQuery cannot validate a form that was called from an external HTML fileJQuery 无法验证从外部 HTML 文件调用的表单
【发布时间】：2019-02-15 01:19:48
【问题描述】：

我的导入表单无法使用 JQuery 的 $(form).validate() 插件进行验证。

我按照this question 提供的示例操作，并让表单成功运行。我将我的表单移动到/html/external.html（我喜欢将我的主站点保存在一个文件中，index.php，并将我所有的外部表单/元素放在一个单独的文件中），并调用验证函数不是工作。

function validateForm() {
    $('#registerForm').validate({
        //rules
        ...

        submitHandler: function(form) {
            $.ajax({
                type: 'POST',
                url: url,
                data: $(form).serialize(), // Fixed typo
                success: function () {
                    alert('succss')
                }
            })
            return false;
        }
    })
}

$(document).ready(function() {
    validateForm() // Validating the form on page load
})

$(document).on('click', '.toFormScreen', function() {
    $('#welcome').remove() // Yes, #welcome was imported as well if the user was not logged in
    $('#mainContainer').load('./html/external.html #registerForm')
    validateForm();
})

上述方法不起作用，因为它找不到表单元素，位于页面加载时未导入的不同文件中。

我尝试在负载下方添加验证功能： validateForm() 还是不行。

在从外部 HTML 文件加载页面后的任何给定时间，是否可以 $(e).validate({...}) 用户导入/附加的表单？

编辑：https://jqueryvalidation.org/ 是我正在使用的插件。

【问题讨论】：

在创建另一个验证之前尝试销毁jqueryvalidation.org/Validator.destroy这是你的插件吗？
form.sterialize 是什么意思？
@jcubic 是的，我正在使用那个插件。如果表单不存在，我看不到调用 destroy 的用途，除非您希望我调用它两次。到目前为止，我只调用验证器一次。我在$(document).ready()试了一次，失败了，但是我现在表单导入后就有了。
@Dmitry Domanski 示例stackoverflow.com/a/15625824/9599400]showed 我对 AJAX 还是很陌生，我只是边学边学。据我所知，form.serialize 还没有被调用，但是当它被调用时，我认为它会从输入中获取数据。
@TomJaquo 你打错了 - 仔细查看链接中的示例，你会发现它应该是 serialize() 而不是 steralize()。另请参阅api.jquery.com/serialize（该方法不是 AJAX 的一部分，尽管它通常用于帮助通过 AJAX 发送数据的过程）。无论如何，以下 Rory 的回答是您主要问题的正确解决方案。

标签： javascript jquery html ajax

【解决方案1】：

问题是因为load() 是异步的。因此，您在#registerForm 上实例化validate() 之前它已在DOM 中创建。

要解决此问题，您需要在load() 的回调中调用validateForm：

$(document).on('click', '.toFormScreen', function() {
  $('#welcome').remove()
  $('#mainContainer').load('./html/external.html #registerForm', function() {
    validateForm();
  });
})

【讨论】：

我以前没有想到。解决了！谢谢！