HTML5的type = button有效，type = submit不能吗？

Question

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

 function updateMap() { //dummy } 

 <form> <div class="group"> <input type="number" id="hour" min="0" max="23" required> <span class="highlight"></span> <span class="bar"></span> <label>Hour of the day (0-23)</label> </div> <div class="group"> <select class="weekselection" id="weekday" required> <option value="" disabled selected>Choose the weekday</option> <option value="0">Monday</option> <option value="1">Tuesday</option> <option value="2">Wednesday</option> <option value="3">Thursday</option> <option value="4">Friday</option> <option value="5">Saturday</option> <option value="6">Sunday</option> </select> </div> <div class="group"> <select class="methodelection" id="normalization" required> <option value="" disabled selected>Choose data handling</option> <option value="0">Normalized data</option> <option value="1">Unnormalized data</option> <option hidden value="2">Normalization not needed in baseline</option> </select> </div> <div class="group"> <select class="methodelection" id="method" onchange="setNormSelection()"> <option value="" disabled selected>Choose the method</option> <option value="0">Baseline (daily/hourly mean)</option> <option value="1">SGD Regressor</option> <option value="2">Decision Tree</option> <option value="3">Neural Network - Multi-Layer Perceptron</option> </select> </div> <button type=button onClick="updateMap()">Show prediction!</button> </form> 

这有效，但是我想实际检查字段的有效性。 如果在这段代码中，我要切换到<button type=submit onSubmit="updateMap()">Show prediction!</button> ，则验证工作正常，但是如果字段被填充，则updateMap()函数不会起作用被调用时，页面会闪烁，好像它已自动更新为默认值一样。 我想念什么？

Answer 1

 var form = document.querySelector('#personal-form'), nameField = document.querySelector('#form-name'), ageField = document.querySelector('#form-age'); var Main = { onFormSubmit: function(e){ if (Main.formIsValid()) { alert('Form is valid, but we will not send it'); e.preventDefault(); // remove if you want to send the form instead } else { alert('Form is invalid'); e.preventDefault(); } }, formIsValid: function() { return nameField.value.length > 0 && parseInt(ageField.value) > 13; } }; form.addEventListener('submit', Main.onFormSubmit); 

 * { box-sizing: border-box; } form > div { clear: both; } form label { float: left; width: 150px; padding: .2em .5em; text-align: right; } form .actions { margin-left: 150px; } 

 <form id="personal-form"> <div> <label for="form-name">Name</label> <input name="name" id="form-name"> </div> <div> <label for="form-age">Age</label> <input type="number" name="age" id="form-age" min="0" max="150"> </div> <div class="actions"> <button type="submit">That's all!</button> </div> </form> 

Answer 2

<form>元素的工作方式是它们包含各种表单字段（文本框，复选框，单选按钮等），以及所有将表单字段数据提交到某个地方（通过提交按钮）的方式。

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

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

在连接到表单的Submit事件的函数中，您可以根据所需的逻辑进行验证。 仅当确定表单数据存在某些问题时，才取消Submit事件，从而防止数据流到任何地方并阻止回发。

最后，请勿使用内联HTML事件属性（ onclick ， onsubmit等）。 看到这个为什么。 而是在专用的JavaScript区域中进行所有事件绑定，并使用现代的和标准的.addEventListener()对象方法。

这是一个按比例缩小的示例：

 // Get references to the HTML elements you'll need access to: var theForm = document.querySelector("form"); var txtUser = document.getElementById("txtUser"); var btnSubmit = document.getElementById("btnSubmit"); // Now, we'll define our validation function. function validate(evt){ // This will keep track of whether we determine there is an error or not var error = false; // Always call .trim() on user input. It strips off any leading or trailing // spaces in the input. if(txtUser.value.trim() === ""){ // There is no data in the text box! error = true; alert("You didn't enter your name!"); } // Other validations would go here and they would set error = true if // they fail. // After all the validations, we determine if the event should be cancelled if(error){ evt.preventDefault(); // Cancel the form submission evt.stopPropagation(); // Cancel event propagation to other objects } else { // This else section is normally not needed, but you said you wanted to // run another function if the form was valid, so this is the place to do that otherFunction(); } } // Set up your submit event handler. We do this in JavaScript these days // not in the HTML with onsubmit. theForm.addEventListener("submit", validate); function otherFunction(){ alert("Other function when data is valid is running!"); } 

 <form action="#" method="post"> <input type="text" name="txtUser" id="txtUser"> <input type="submit" value="Submit" id="btnSubmit"> </form> 

Answer 3

这样使用onsubmit不在button属性中，它是一个form属性

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

试试这个代码

 function updateMap(e) { e.preventDefault(); //the will prevent from page refresh if not //apply you validation code return false; // the will prevent from page refresh . } 

 <form onsubmit="return updateMap(event)"> <div class="group"> <input type="number" id="hour" min="0" max="23" required> <span class="highlight"></span> <span class="bar"></span> <label>Hour of the day (0-23)</label> </div> <div class="group"> <select class="weekselection" id="weekday" required> <option value="" disabled selected>Choose the weekday</option> <option value="0">Monday</option> <option value="1">Tuesday</option> <option value="2">Wednesday</option> <option value="3">Thursday</option> <option value="4">Friday</option> <option value="5">Saturday</option> <option value="6">Sunday</option> </select> </div> <div class="group"> <select class="methodelection" id="normalization" required> <option value="" disabled selected>Choose data handling</option> <option value="0">Normalized data</option> <option value="1">Unnormalized data</option> <option hidden value="2">Normalization not needed in baseline</option> </select> </div> <div class="group"> <select class="methodelection" id="method" onchange="setNormSelection()"> <option value="" disabled selected>Choose the method</option> <option value="0">Baseline (daily/hourly mean)</option> <option value="1">SGD Regressor</option> <option value="2">Decision Tree</option> <option value="3">Neural Network - Multi-Layer Perceptron</option> </select> </div> <button type="submit">Show prediction!</button> </form>