Javascript 当我多次单击“提交”按钮时，会多次收到错误

我正在尝试使用javascript验证表单。当输入字段为空时，我希望错误消息显示在相应标签的旁边。我能够做到这一点，但当我多次单击“提交”按钮时，我会多次收到错误。我希望即使多次单击“提交”按钮，错误也只显示一次

我尝试使用if/else检查错误元素是否已经存在

//表单验证 让formEl=document.getElementById'myForm'； 让formInput=document.getElementsByTagName'input'； //让submitBtn=document.getElementById'submit'； let error=document.getElementById'error'； formEl.addEventListener'submit'，functionevent{ 违约事件； 对于let i=0；i我添加的样式纯粹是为了这个示例。但是，我确实在错误元素中添加了一个类错误，以使它们在检查其存在性时易于识别，这样我们就不会在标记将来更改时意外删除任何其他元素，而不是使用span作为选择器，甚至像previousElementSibling这样的东西

现在我们可以检查错误元素是否已经存在，如果不存在，则只添加一个新的错误元素。我还添加了删除错误消息和在字段不再为空时重置边框颜色的功能

注意：Internet Explorer中不支持“最接近”功能，因此如果您需要支持该功能，则需要为此找到一个解决方法/多边形填充

//表单验证 让formEl=document.getElementById'myForm'； 让formInput=document.getElementsByTagName'input'； //让submitBtn=document.getElementById'submit'； let error=document.getElementById'error'； formEl.addEventListener'submit'，functionevent{ 违约事件； 对于let i=0；i您知道，您只需将所需的属性添加到输入中，就可以免费获得HTML5验证。这里不需要使用JavaScript：停止每次创建和添加一个新的-创建一次，然后隐藏/显示它。您要多次添加它。尝试保持一个错误范围。要更新时更改其文本。替换，而不是追加。您可能希望在单击时禁用“提交”按钮，并在用户更新任何表单字段的内容时重新启用该按钮。这应该可以解决你的问题。我知道我可以只使用HTML5的required属性，但我想只使用纯JS验证表单。