Html 为什么引导表单验证没有'；你不能在一个网页上工作吗？

我有3个网页，每页包含1个引导表单。表单的结构相同，但每个表单都有不同数量的输入字段以及它们在表单中的显示顺序

HTML页面文件、本地JS文件都在同一个文件夹中（没有子文件夹）。每页上的

具有相同的资产。 非功能表单有其他表单没有的文本区域和按钮。我试着把这些评论出来，但这并没有解决问题。我已经尝试删除本地CSS的链接，这在问题上也没有什么不同

当我用W3验证程序检查html文件时，我得到一个错误和两个警告。 错误：在此上下文中，元素图例不允许作为元素窗体的子级。 警告：并非所有浏览器都支持日期输入类型。请确保测试，并考虑使用聚脂。注释掉这个传说没有什么区别。 我在工作表单和非工作表单中都有日期字段。 当我在Chrome中查看开发工具时，我没有看到任何错误

我已经在Chrome和FireFox上进行了测试，所以我认为这不是特定于浏览器的问题。 注意，所有这些都是在本地机器上完成的，并且都使用notepadd++进行编码。 我知道这将是一个巨大的代码发布审查，但如果需要，我会这样做。我希望有人能提出解决问题的建议

---

已经创建了2个jsbin。第一个链接是带有非工作表单的页面。第二个链接是带有工作表单的页面。第一个环节是。第二个链接是第一个JSBin中的$（“#cruise1”）.bootstrapValidator（…）。页面中没有id为“cruise1”的元素。相反，表单的id是“quoteForm”。因此验证程序不会绑定到它，因为它找不到id为“cruise1”的元素

由于在两个页面上都包含相同的验证JS，为了获得验证两个表单的相同代码，必须使用一个可以匹配两个表单的选择器

有两种可能的简单解决方案

1） 给两个表单都指定一个“cruise1”的id。然而，这可能不是很好的描述您的报价表

2） 为两个表单提供相同的类，并使用该类作为选择器初始化验证器。e、 g:

表单标签：

<form class="form-horizontal validatableForm" id="quoteform">

这将在与给定选择器匹配的所有表单（即，具有该类的所有表单）上初始化相同的验证。在任何一个页面中，在您的情况下，您可能只有一个表单加载了该类，但这意味着当代码包含在两个页面中时，它将工作，并且如果出于任何原因，您有两个表单加载了该类，那么它也将绑定这些表单

---

最后一点要注意的是，因为您提到了您是新手：我希望您在服务器端代码（处理提交的表单数据的代码）中实现了相同的验证规则。您使用的客户端验证对于用户体验来说非常好，但并不安全——任何用户，尤其是恶意用户或自动垃圾邮件机器人，都可以轻松操纵或绕过JavaScript验证（最简单的方法是关闭JavaScript），并尝试向服务器发送无效或有问题的数据。您不能信任来自客户端的任何内容，必须重新验证所有内容以保护您的应用程序和数据库。

您不需要发布所有代码，只需发布一个可以重现问题的MCVE即可。请参阅以获取指导。事实上，如果幸运的话，创建一个的任务可能会让你自己找到问题。如果我们看不到您的代码，我们无法告诉您您的问题是什么。您还没有真正详细描述实际问题。我们只是对您的页面进行了口头描述（这在调试中几乎没有用处）和一个模糊的“验证无效”声明。ADyson。很抱歉说得含糊不清。当我说验证不起作用时，我的意思是，当用户在输入中键入带有X和消息的红色无效状态时，也不起作用，带有复选标记的绿色有效状态也不起作用。我目前根本没有提交这些表格。我只是使用验证状态来帮助用户输入有效数据。我将按照建议调查mcve。也可以做一个js-bin。我已经创建了2个jsbin。第一个链接是带有非工作表单的页面。第二个链接是带有工作表单的页面。第一个链接第一个链接中的第二个链接：

$（“#cruise1”）。bootstrapValidator

。页面中没有id为“cruise1”的元素。您的意思是

$（“#quoteform”）.bootstrapValidator

，因为“quote1”是表单元素的id？谢谢您指出这一点。我将表单id从（#quoteform）更改为（#cruise1），验证开始工作。所以，这是两个不同页面上的两种不同形式。我如何给这些表单单独的id，并且仍然让验证器工作？为什么验证器只绑定到那个id？我对你的答案投了赞成票。完全解决了我的问题。我给表单提供了相同的类和唯一的#id。将该类包含在验证程序脚本的选择器中。这些是演示用的。计划使用ajax和php在服务器端验证演示是否符合客户批准。

<form class="form-horizontal validatableForm" id="cruise1">

$('.validatableForm').bootstrapValidator( //...etc