如果我的JavaScript函數返回false，我該如何防止表單動作？

Question

我對編程非常不熟悉，所以很抱歉，如果這是一個愚蠢的問題。

我正在創建一個表單，用戶可以使用一個按鈕進行提交。我已經使用腳本函數來決定它們是否會返回true或false，唯一的條件是必須填充輸入框。這裏是我的JavaScript和HTML代碼的簡化版本，我只包含其中一個輸入框。 （我的實際代碼有六）

function validateEmail() { 
 
    var x = document.forms["myForm"]["email"].value; 
 
    if (x == null || x == "") { 
 
     alert("Email must be filled out"); 
 
     return false; 
 
\t } 
 
\t else { 
 
\t \t return true; 
 
\t } 
 
}

<form name="myForm" 
 
onsubmit="validateEmail()" method="post" action="Different_Page.html"> 
 
    
 
<label for="email">Email Address:</label> 
 
<input type="email" name="email"> 
 
    
 
<input type="submit" value="Submit"> 
 
</form>

的問題是，如果用戶不輸入自己的電子郵件和函數返回false，它仍然轉到頁我只希望它當它返回true時去。換句話說，我希望它什麼都不做，並保持在這個頁面上，但是隻有當腳本返回false時。我該如何做到這一點？

Answer 1

您必須從onsubmit函數中獲取return false，而不僅僅是函數調用的函數。

onsubmit="return validateEmail()" 

---

這就是說，現代的代碼將避免有利於結合事件處理程序使用JavaScript固有的事件屬性...

function validateEmail(evt) { 
 
    var x = this.elements.email.value; 
 
    if (x == "") { 
 
    alert("Email must be filled out"); 
 
    evt.preventDefault(); 
 
    } 
 
} 
 

 
document.getElementById('myForm').addEventListener("submit", validateEmail);

<form id="myForm" method="post" action="Different_Page.html"> 
 

 
    <label for="email">Email Address:</label> 
 
    <input type="email" name="email"> 
 

 
    <input type="submit" value="Submit"> 
 
</form>

---

...或者完全忘記的JavaScript並使用H中引入的驗證功能TML 5.

<form method="post" action="Different_Page.html"> 
 

 
    <label for="email">Email Address:</label> 
 
    <input type="email" name="email" required> 
 

 
    <input type="submit" value="Submit"> 
 
</form>