为什么bootstrap表单验证在一个网页上不起作用？

Question

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

HTML页面文件，本地JS文件都在同一个文件夹中（没有子文件夹）。每页上的<头>具有相同的组合。 非功能形式有一个文本区域和按钮，其他形式没有。我试过评论这些，但这并没有解决问题。我已经尝试删除本地CSS的链接，这在问题上没有任何区别。

当我用W3验证器检查html文件时，我得到一个错误和2个警告。 错误：在此上下文中，元素图例不允许作为元素形式的子元素。 警告：并非所有浏览器都支持日期输入类型。请务必进行测试，并考虑使用polyfill。评论这个传说并没有什么区别。 我在工作和非工作表单中都有一个日期字段。 当我查看Chrome中的开发工具时，我没有看到任何错误。

我已经在Chrome和FireFox上进行了测试，因此我认为这不是浏览器特定的问题。 请注意，这一切都在本地计算机上完成，并且全部使用notepadd ++编码。 我知道这将是一个大量的代码发布审查，但如果需要我会这样做。我希望有人会有故障排除建议。

创建了2个jsbin。第一个链接是非工作表单的页面。第二个链接是带有工作表单的页面。第一个链接是https://jsbin.com/xuwuziy/edit?html,css,js,output。第二个链接是https://jsbin.com/luqatel/edit?html,css,js,output

Answer 1

在第一个JSBin中：$('#cruise1').bootstrapValidator(...。页面中没有id为“cruise1”的元素。相反，您的表单的ID是“quoteForm”。因此验证器不绑定它，因为它找不到具有“cruise1”ID的元素。

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

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

1）给两个表格一个id为“cruise1”。但是，这可能不是您的报价表格的描述。

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

表单标记：

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

和

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

验证器初始化：

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

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

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