提交时跨度消失

Question

我被要求用JavaScript验证代码创建一个简单的表单。我已经构建了整个表单，并且我的所有验证脚本都在工作，但是我被要求在相应字段旁边的 Span 标签中显示任何相关错误（而不是像我习惯的那样显示警报）。

我被告知在每个元素（如文本输入、单选按钮等）旁边都有一个 span 标签，其中包含之前输入的相应错误文本，然后设置每个 span 的样式以隐藏它们。按下提交按钮时，脚本应该将相应范围的样式更改为可见，以便显示文本。我已经为此编写了代码，但我遇到的问题是我的 Span 错误变得可见，但几乎立即它们消失回隐藏状态。发生这种情况有什么特别的原因吗？

这是我的一些代码。

.HTML：

< input type="checkbox" name="agree"/> < span id="agreeSpan>Error text< /span>

.CSS：

span {
color:red;
font-size:small;
visibility:hidden;
}

而 JavaScript：

   function validateAgreement()
    {
    var agreeBox = document.registration.agree;
    var agreeSpan = document.getElementById('agreeSpan');
   if (!agreeBox.checked) {
      agreeSpan.style.visibility = 'visible';
      return false;
    }

我错过了一些明显的东西吗？我是否有可能尝试设置 1 个特定跨度的样式，并且常规跨度标签的样式属性正在覆盖此特定跨度？

非常感谢，如果这是一个新手问题，我们深表歉意！我是 JS :) 的新手

Answer 1

要阻止提交发生，返回 false 是不够的。这取决于你如何调用该函数，我想它是这样的

<form action='blah' onsubmit='return validateAgreement();'>
 ...
</form>

请注意返回。提交时处理程序需要返回 false，因此您需要确保返回函数返回的任何值。如果你刚刚做了...

<form action='blah' onsubmit='validateAgreement();'>
 ...
</form>

然后，您的表单将始终被提交。

Answer 2

在您的 HTML 代码中，您错过了id它应该已id="agreeSpan"但您已键入id="agreeSpan