Javascript 我的选择区域验证将强制我的页面自动重新加载，而不是运行验证

正如我所期望的那样，我已经验证了所有其他字段，但是当我添加JS来验证select选项时，我的页面会在点击submit后重新加载。我尝试了多种方法来验证select选项，但没有找到解决方案。根据项目要求，我必须使用纯JS来验证整个表单，并且在不包含任何用户输入的范围内的每个字段下方显示一条错误消息。我将在下面发布我的JS，如果需要，我可以发布我的HTML。我在我的选择区号之间添加了一些额外的空格，希望有助于提高可读性

document.AddEventListenerDomainContentLoaded，函数事件{ Alert启用JavaScript时最好查看此页面； }; 功能验证{ //新增：将此方式移到此处，以便所有验证都可以影响其值： var formValid=true； //用于检查是否已输入名称的函数 var name=document.getElementById'name'。值； 如果name==null | | name.trim=={ document.getElementById'nameerror'.innerHTML=请输入您的全名； formValid=false； }否则{ document.getElementById'nameerror'。innerHTML=； } //用于检查是否已输入电子邮件的功能 var email=document.getElementById'email'。值； 如果email==null | | email.trim=={ document.getElementById'emailerror'。innerHTML=请输入您的电子邮件地址； formValid=false； }否则{ document.getElementById'emailerror'。innerHTML=； } //用于检查是否提供了电话号码的功能 var phone=document.getElementById'phone'。值； 如果phone==null | | phone.trim=={ document.getElementById'phoneerror'.innerHTML=请输入您的电话号码； formValid=false； }否则{ document.getElementById'phoneerror'。innerHTML=； } //验证选择选项 var select=document.getElementById'select'。值； 如果选择=={ document.getElementById'selecterror'。innerHTML=请进行选择； formValid=false； }否则{ document.getElementById'selecterror'。innerHTML=； } //函数来验证textarea字段 var name=document.getElementById'textarea'。值； 如果name==null | | name.trim=={ document.getElementById'textareaerror'.innerHTML=请输入其他信息； formValid=false； }否则{ getElementById'textareaerror'.innerHTML=； } //用于验证是否已选择任何单选按钮的函数 var radios=document.getElementsByName'radio'； var=valid=false； var i=0； while！radiosValid&&i大新闻！！丹的蛋糕很快就要开一家新餐厅了

联系我们 姓名： 电邮： 我们永远不会与其他人共享您的电子邮件。 电话： 查询原因： -请选择一个选项- 餐饮 私人聚会 反馈 另外 其他信息： 你去过餐馆吗？ 不 对 与您联系的最佳时间： M T W Th F 亚利桑那州安克雷奇丝绸之路1123号，邮编：99501

907-998-0122

document.contactForm.name.onfocus=函数{ document.getElementById'namehint'.innerHTML=输入全名； } document.contactForm.name.onfocus=函数{ document.getElementById'namehint'.innerHTML=输入全名； } ->

---

使用“提交”按钮时，默认情况下，该按钮用于在定义表单html标记时刷新或指向“操作”属性中指定的位置。如果您的目标是停止此刷新，则需要在按钮上放置一个onClick属性，该属性保存要执行的函数。如果您知道在DOM元素上放置事件侦听器的任何其他方法，您也可以采用该方法，我只是以此为例，然后，您将传递一个变量（如event）以将事件操作保存到参数中。然后在函数中使用event.preventDefault；，这将停止刷新。执行该命令后，您可以执行任何其他需要执行的验证，然后触发刷新或新窗口位置，以您的目标为准。

您遇到的第一个问题是您正在执行：

var select = document.getElementById('select').value;

但是select是这样声明的：

<select id="select " name="reason" class="custom-select" required> 

我想这应该能解决你的问题。此外，如果要防止页面重新加载，无论表单是否有效，都必须防止提交操作的默认行为。您可以通过在submit事件上调用preventDefault来实现这一点，您需要将该事件传递给您的函数。请记住，以这种方式，表格将永远不会被提交，您必须自己完成

通过以下方式将事件传递给函数验证：

<select id="select " name="reason" class="custom-select" required> 

HTML 是否为违约的官方文件

---

如果这对您有帮助，请告诉我，否则，请告诉我哪里出了问题。

因此，preventDefault可以不重新加载页面，但表单验证的其余部分永远不会运行。之后的每个字段不再显示空白字段的错误消息。如果我删除了代码，在没有代码的情况下运行页面，一切都会正常工作。@djtt我想我找到了问题所在，我在通信中编辑了我的答案。您一直使用错误的ID进行选择。这就解决了问题！！！一个奇怪的空间。啊。。。英雄联盟您是否调试了它以发现类型错误？？我不擅长调试，所以如果你做了，你能发布你做了什么来解决这个问题吗。是的，我擅长调试。不客气！！请，@djsublett，将我的答案标记为已接受的绿色复选标记，然后向上投票。提前谢谢！我记下了你的答案，但由于我的名声不到15岁，所以不会让我放弃它。s

<form name="contactForm" method="post" id="contactForm" novalidate onsubmit="return validate(event)">
    ...
</form>

function validate(e) {

    e.preventDefault();

    ...  // The rest of your code
}