我使用jQuery Validator插件1.19.5在一个稍微大(但简单)的表单上，由一个在线转换器生成的PDF到html5
表单有一个Submit按钮实现为一个按钮，在formviewer.js文件中有一个javascript函数的onclick，这是向html5转换的一部分。如果我在Chrome 107.0.5304.107开发人员工具中打开表单，我可以看到提交按钮转到以下代码，我添加到处理formviewer.js中提交的函数的success分支:
success: function() {
const OSHform=$("form").eq(0);
if (OSHform.valid()) {
top.document.location.href = "/Adsentry/completed";
}
else {
alert("Fields did not validate, please fix errors and try again");
}
},
failure: function() {
alert("Form failed to submit, please try again")
}
在一个单独的脚本中，我调用了form元素上的validate()，将要验证的字段的规则传递给它。
var $j = jQuery;
var OSHform = $j("form");
OSHform.validate({
rules: {
"NAME OF DRIVER": "required",
"EMAIL": "required",
"EMAIL": "email",
"ADDRESS": "required"
}
});
如果省略必填字段，或者在电子邮件字段中输入无效的电子邮件地址，则调用valid()返回false。事实上，如果我查看elements选项卡中的输入元素，我可以看到class="error"被添加，如果我纠正错误，它会变为class="valid"。此外，使用class="error"，为该元素添加了一个标签，同样使用class="error"，并添加style="display:none;"到标签
所以一切都很好，除了没有文本或消息与标签一起，所以它的存在/不存在，或者display:none的存在/不存在，对页面的正常显示没有影响。
我已经尝试在调试器中逐步执行代码，但我担心我的javascript太弱了，我无法真正弄清楚发生了什么，以至于无法理解为什么消息不被显示。
你可以暂时在这里玩它，但我不能保证不再摆弄它!目前只有3个必需字段:驱动程序的名称，地址和电子邮件。如果它们都正确，则表单按预期提交。
有点失望，这甚至没有得到任何评论，更不用说回答了。另一方面，结果证明答案与任何比我更有经验的人可能猜到的完全一样:错误报告在HTML元素中，但是没有CSS将它们放在页面上的正确位置。该插件似乎是错误的，未能产生默认消息文本描述的错误;相反，它只生成消息文本，该文本只是错误输入元素的name属性。但是如果没有适当的CSS, name属性就会在页面底部的黑色条中输出，使其基本上不可见。眼尖的人才能注意到"苍蝇"的突然出现。当点击提交按钮时，在页面底部。
插件只是在错误的输入元素之后插入一个HTML元素到DOM中。但是，从PDF生成的文件包括一个样式表，其中的选择器使用每个输入元素的ID来指定输入元素在页面上的绝对位置。如果只是在DOM中插入一个元素作为输入元素的下一个兄弟元素，而不使用样式，则会导致它呈现在页面的底部。甚至当我发现缺少CSS是问题所在时，我也花了一段时间才找到一些有效的方法:好的旧选择器专一性。所有的输入元素都是使用具有绝对位置的ID选择器放置的，我找不到让消息与输入元素之间具有简单的近亲关系的方法，无法使消息在输入元素之后立即呈现。虽然这让我感到"恶心"。为此，我想出的解决方案是使用jQuery迭代所有带有"error"的消息元素。类，获取它要报告的输入元素的ID，然后使用$.css()获取输入元素的有效top、left和width样式属性。然后去掉后面的"px"，乘以1得到一个数值，将width添加到left数值中，并在消息元素上使用$.css()指定新的top和left属性。这使得我在传递给validate构造函数的对象的messages子对象中定义的消息出现在正确的位置。对于无效元素，为什么没有出现默认消息，而不是出现输入元素的名称，这仍然是个谜。