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>