如何在不更改 JS 验证格式的情况下验证同一页面中的多个表单答案

【问题标题】：How to validate more than one form in same page without changing JS validation format如何在不更改 JS 验证格式的情况下验证同一页面中的多个表单
【发布时间】：2016-07-18 13:34:19
【问题描述】：

我目前有一个包含两种表单的 JSP 页面：

<body>
   <form id="1"></form>
   <form id="2"></form>
</body>

在查看页面时只会显示一个表单。

有一个 JS 验证文件用于在提交时检查表单的完整性。简单来说，这个js文件是不能改的。每当调用 JS 文件时，核心函数都采用这种形式。

function validateForm(formToValidate){}

验证结果alert是一个JSP页面id="alertMessage"，被CSS隐藏在开头：

#alertMessage {
  display: none;
}

当发生任何验证错误时，页面将通过简单的 jQuery 变为可见：$("#alertMessage").show();

CSS 要求 id="alertMessage" 不显示警报 JSP 页面，而 JS 要求 id="alertMessage" 进行验证，并显示警报消息。

因为我在页面中有两个表单并且表单包含不同的验证内容，所以我必须在我的页面中包含两个 JSP 警报。

<body>
   <jsp:include page="alert for form 1">
   <form id="1"></form>

   <jsp:include page="alert for form 2">
   <form id="2"></form>
</body>

问题：不仅我在一个页面中有重复的 id id="alertMessage"，而且它始终是第一个被选中的 JSP 警报页面。所以即使我提交表单 2，也会触发表单 1 的警报。由于我的设计限制，无法将警报合并到一个 JSP 警报页面中。

我该如何解决这个问题？

【问题讨论】：

在验证时传递表单的 id 并将 error-class 作为每个 form 表单的子级
不要有重复的 ID，它们应该是唯一的。

标签： javascript jquery html forms jsp

【解决方案1】：

这些细微的修改应该会对您有所帮助。

将函数validateForm(formToValidate)中的表单id作为formToValidate参数传递。

从错误消息容器中删除 id 标记。将class="alertMessage" 添加为相同的属性。

使用$("#"+formToValidate+" .alertMessage").show(); 代替$("#alertMessage").show();。定义类.alertMessage的样式如下

.alertMessage {
  display: none;
}

【讨论】：