Question

我目前有一个JSP页面，其中包含两种形式：

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

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

在提交时，有一个JS验证文件用于检查表单的完整性。简单地说，这个JS文件无法更改。无论何时调用JS文件，核心函数都采用表单形式。

function validateForm(formToValidate){}

验证结果警报是一个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>

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

我该如何解决这个问题？

Answer 1

这些细微的修改应该对你有帮助。

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

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

而不是$("#alertMessage").show();使用$("#"+formToValidate+" .alertMessage").show();。定义类.alertMessage的样式，如下所示

.alertMessage {
  display: none;
}