jQuery Validator：验证未附加到 DOM 的表单答案

【问题标题】：jQuery Validator: Validate form that is not attached to DOMjQuery Validator：验证未附加到 DOM 的表单
【发布时间】：2018-10-05 16:55:44
【问题描述】：

当我尝试使用jQuery Validator plugin 验证表单时遇到问题。所以在这种情况下，我构建了一个 div 表（不是表元素，而是样式为表的 div），其中每一行本质上是它自己的表单，带有任何表单控件。

但是，由于该表可能有数百行，因此我不希望将每个行元素包装在其自己的单独形式中的开销。所以我想出了一个想法，即 save 方法只是将行本身作为 arg，以便在幕后创建/验证/提交表单。

我所做的基本上是克隆行并将克隆附加到我创建的新表单上

$("<form></form>").append(clonedRow);

然后我获取结果变量（表单）并设置验证。验证选项/设置如下所示：

form.validate({
    rules: {
        Follow_Up_Code: { required: true, maxlength: 2 }
    },
    messages: {
        Follow_Up_Code: { required: "...", maxlength: "..." }
    },
    submitHandler: function(){...}
});

目前我只想针对这一行中的一个输入进行验证以进行测试。这是输入标记：

<input type="text" class="get set input" name="Follow_Up_Code" style="width: 100%;">

表单运行 .validate() 后，我立即提交表单。但是，对于我的测试用例，表单通过验证并每次运行验证器中设置的 SubmitHandler。

这让我觉得我想用这个插件验证的任何表单都需要附加到 DOM 才能正确验证。但是我没有找到关于此的文档。我想知道是否有办法解决这个问题，或者我是否最好为此尝试查找/创建自己的验证服务。

【问题讨论】：

标签： javascript jquery html validation

【解决方案1】：

经过测试，我发现了这一点。是的，表单需要以某种形状或形式附加到 DOM。但是，您可以轻松且不显眼地解决这个问题：

form.css({ position: "absolute", visibility: "hidden", left: "-5000px" });
$("body").append(frm);
frm.submit();

这样用户在 DOM 上时将无法看到此表单或与之交互。

这将完成工作并验证表单。但是，在这种情况下，如果有任何我想在原始表上显示的验证错误。我必须在设置时从validator's invalidHandler option 内部访问无效控件。从那里我只需要在我想要的位置插入错误消息。

说到底，最好 .destroy 销毁验证器并从 DOM 中删除该表单。我相信在提交处理程序和无效处理程序的末尾都这样做是最好的方法。

【讨论】：