Javascript HTML5类型=按钮起作用，类型=提交不起作用？

我有一个表单，我想验证它，如果有效，运行一个JavaScript函数。为此，我有：

函数更新映射（）{
//假人
}

一天中的小时数（0-23）
选择工作日
星期一
星期二
星期三
星期四
星期五
星期六
星期日
选择数据处理
标准化数据
非规范化数据
基线中不需要标准化
选择方法
基线（日/小时平均值）
回归器
决策树
神经网络-多层感知器
显示预测！

像这样使用Submit上的

不在按钮属性中它是表单属性

<from onsubmit="return updateMap()"> 
  <button type="submit" >Show prediction!</button>
</form>


一天中的小时数（0-23）
选择工作日
星期一
星期二
星期三
星期四
星期五
星期六
星期日
选择数据处理
标准化数据
非规范化数据
基线中不需要标准化
选择方法
基线（日/小时平均值）
回归器
决策树
神经网络-多层感知器
显示预测！

var form=document.querySelector（“#个人表单”），
nameField=document.querySelector（“#表单名称”），
ageField=document.querySelector（“#表单年龄”）；
var Main={
onFormSubmit:函数（e）{
if（Main.formIsValid（））{
警报（'表格有效，但我们不会发送'）；
e、 preventDefault（）；//如果要改为发送表单，请删除
}否则{
警报（“表单无效”）；
e、 预防默认值（）；
}
},
formIsValid:function（）{
返回nameField.value.length>0&&parseInt（ageField.value）>13；
}
};
表单.addEventListener（'submit'，Main.onFormSubmit）
*{
框大小：边框框；
}
表格>分区{
明确：两者皆有；
}
表格标签{
浮动：左；
宽度：150px；
填充物：2em.5em；
文本对齐：右对齐；
}
形式.行动{
左边距：150像素；
}

名称
年龄
这就是全部！
元素的工作方式是，它们包含各种表单字段（文本框、复选框、单选按钮等），以及所有表单字段数据在某处提交的方式（通过提交按钮）

单击提交按钮时，
元素中的所有
名称
和
值
数据表单字段元素（或通过
表单
属性附加到该元素）发送到表单的
操作
属性中指定的位置，并根据表单的
方法
属性中指定的值发送数据。这意味着提交表单时，浏览器将从
操作中指定的位置重定向并加载响应。这是正常的，也是表单提交过程的一部分。当然，这意味着当前页面将被卸载。这种卸载/加载过程被称为“回发”。更现代的向服务器发送数据的方法（如AJAX）避免了回发，并允许在不卸载当前页面的情况下接收来自服务器的响应

现在，要验证表单中的条目，您需要为表单的
submit
事件设置事件处理程序，而不是submit按钮的
click
事件。起初，这似乎有点违反直觉，但当您单击“提交”按钮时，会触发两个事件-按钮单击，然后表单提交

在连接到表单提交事件的函数中，可以根据所需的逻辑进行验证。只有在确定表单数据存在无效内容时，才取消提交事件，从而阻止数据移动到任何地方并阻止回发

最后，不要使用内联HTML事件属性（
onclick
，
onsubmit
，等等）。有关原因，请参见。相反，在专用JavaScript区域中执行所有事件绑定，并使用现代标准的
.addEventListener（）
对象方法

以下是一个按比例缩小的示例：


//获取对需要访问的HTML元素的引用：
var theForm=document.querySelector（“表单”）；
var txtUser=document.getElementById（“txtUser”）；
var btnSubmit=document.getElementById（“btnSubmit”）；
//现在，我们将定义验证函数。
功能验证（evt）{
//这将跟踪我们是否确定存在错误
var错误=错误；
//总是在用户输入时调用.trim（）。它会去掉任何前导或尾随
//输入中的空格。
如果（txtUser.value.trim（）=“”）{
//文本框中没有数据！
错误=真；
警告（“你没有输入你的名字！”）；
}
//其他验证将转到此处，如果
//他们失败了。
//在所有验证之后，我们确定是否应该取消该事件
如果（错误）{
evt.preventDefault（）；//取消表单提交
evt.stopPropagation（）；//取消到其他对象的事件传播
}否则{
//这个else部分通常是不需要的，但是你说你想这样做
//如果表单有效，则运行另一个函数，因此这是执行此操作的地方
otherFunction（）；
}
}
//设置提交事件处理程序。现在我们用JavaScript来实现这一点
//不在onsubmit的HTML中。
添加的格式列表（“提交”，验证）；
函数otherFunction（）{
警报（“数据有效时的其他功能正在运行！”）；
}

但如果我这样做，
onClick
将被触发，而不管字段值如何。因此不会进行任何检查。我需要
onsubmit
，但这只会重新加载整个页面。您需要阻止
onsubmit
事件。请参阅我的更新答案。我是为您添加的代码片段，不使用内联HTML事件属性。@ScottMarcus为什么？如果您的事件处理程序没有执行任何操作