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

使用像这样的onsubmit而不是按钮属性，它是一个表单属性

<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>

​

Answer 2

​

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 3

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

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

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

在连接到表单的submit事件的函数中，您可以根据您想要的任何逻辑进行验证。只有当您确定表单数据有某种无效的内容时，才会取消提交事件，从而阻止数据到任何地方并阻止回发。

最后，不要使用内联的HTML属性(onclick、onsubmit等)。有关原因，请参见this。相反，在一个专用的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>

​