HTML5 type =按鈕有效，type = submit not？

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> 
 
\t \t \t <option value="0">Monday</option> 
 
\t \t \t <option value="1">Tuesday</option> 
 
\t \t \t <option value="2">Wednesday</option> 
 
\t \t \t <option value="3">Thursday</option> 
 
\t \t \t <option value="4">Friday</option> 
 
\t \t \t <option value="5">Saturday</option> 
 
\t \t \t <option value="6">Sunday</option> 
 
\t \t </select> 
 
    </div> 
 
    <div class="group"> 
 
    <select class="methodelection" id="normalization" required> 
 
\t \t \t <option value="" disabled selected>Choose data handling</option> 
 
\t \t \t <option value="0">Normalized data</option> 
 
\t \t \t <option value="1">Unnormalized data</option> 
 
\t \t \t <option hidden value="2">Normalization not needed in baseline</option> 
 
\t \t </select> 
 
    </div> 
 

 
    <div class="group"> 
 
    <select class="methodelection" id="method" onchange="setNormSelection()"> 
 
\t \t \t <option value="" disabled selected>Choose the method</option> 
 
\t \t \t <option value="0">Baseline (daily/hourly mean)</option> 
 
\t \t \t <option value="1">SGD Regressor</option> 
 
\t \t \t <option value="2">Decision Tree</option> 
 
\t \t \t <option value="3">Neural Network - Multi-Layer Perceptron</option> 
 
\t \t </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> 
 
\t \t \t <option value="0">Monday</option> 
 
\t \t \t <option value="1">Tuesday</option> 
 
\t \t \t <option value="2">Wednesday</option> 
 
\t \t \t <option value="3">Thursday</option> 
 
\t \t \t <option value="4">Friday</option> 
 
\t \t \t <option value="5">Saturday</option> 
 
\t \t \t <option value="6">Sunday</option> 
 
\t \t </select> 
 
    </div> 
 
    <div class="group"> 
 
    <select class="methodelection" id="normalization" required> 
 
\t \t \t <option value="" disabled selected>Choose data handling</option> 
 
\t \t \t <option value="0">Normalized data</option> 
 
\t \t \t <option value="1">Unnormalized data</option> 
 
\t \t \t <option hidden value="2">Normalization not needed in baseline</option> 
 
\t \t </select> 
 
    </div> 
 

 
    <div class="group"> 
 
    <select class="methodelection" id="method" onchange="setNormSelection()"> 
 
\t \t \t <option value="" disabled selected>Choose the method</option> 
 
\t \t \t <option value="0">Baseline (daily/hourly mean)</option> 
 
\t \t \t <option value="1">SGD Regressor</option> 
 
\t \t \t <option value="2">Decision Tree</option> 
 
\t \t \t <option value="3">Neural Network - Multi-Layer Perceptron</option> 
 
\t \t </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>要素的工作就是它們含有各種表單字段（文本框，checboxes，單選按鈕等），以及爲所有在某處被提交的表單字段數據的方式（通過提交按鈕） 。

當點擊提交按鈕，所有的<form>元件內的name和value數據表單字段元件（或經由form屬性附加到它）被髮送到在窗體的action屬性所指定的位置和數據被髮送根據表格的method屬性中指定的值。這意味着當提交表單時，瀏覽器將重定向並加載action中指定位置的響應。這是正常的，並且是表單提交過程的一部分。當然，這意味着當前頁面將被卸載。這種卸載/加載過程已經被稱爲「回傳」。比較現代的向服務器發送數據的方法，比如AJAX，避免了回發，並且允許在沒有當前頁面被卸載的情況下接收來自服務器的響應。

現在，要驗證表單中的條目，您需要爲表單的submit事件設置事件處理程序 - 而不是提交按鈕的click事件。這看起來似乎有點違反直覺，但是當你點擊提交按鈕時，兩個事件觸發 - 點擊按鈕，然後表單提交。

在連接到表單提交事件的函數中，根據所需的任何邏輯進行驗證。只有當您確定表單數據的某些內容無效時，纔會取消提交事件，從而防止數據進入任何地方並阻止回發。

最後，請勿使用內嵌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>