Javascript「onsmit」事件不能正常工作

我只是在練習js。我試圖在表單中做一個非常簡單的驗證，但是它正如我所期望的那樣出現了錯誤。這裏是我的代碼：Javascript「onsmit」事件不能正常工作

var form = document.getElementById('form'); 
 
var name = document.getElementById('name'); 
 
var email = document.getElementById('email'); 
 
var msg = document.getElementById('message'); 
 
var error = document.getElementById('error'); 
 

 
function handlingForm() { 
 

 
    form.onsubmit = function(c) 
 
    { 
 
     if (name.value == "") 
 
      { 
 
       error.innerHTML = "Error Submiting Form !"; 
 
       return false; 
 
      } 
 
      else 
 
      { 
 
       error.innerHTML = "You have successfuly submited the Form..! Congrats ;)"; 
 
       return true; // ;) Just Kidding :D 
 
      } 
 

 
    }; 
 
} 
 

 

 
window.onload = function(c) 
 
{ 
 
    handlingForm(); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>jsForm</title> 
 

 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 

 
</head> 
 
<body> 
 

 
    <div id="container"> 
 

 
     <form id="form"> 
 

 
      <input type="text" placeholder="Name" id="name"> 
 
      <input type="text" placeholder="Email" id="email"> 
 
      <textarea rows="4" placeholder="Message" id="message"></textarea> 
 
      <input type="submit" value="Send" id="send"> 
 
      <p id="error"></p> 
 
     </form> 
 

 
    </div> 
 

 
    <script src="script.js"></script> 
 
</body> 
 
</html>

的問題是，它不進行驗證。每次它提交時返回true，但是當我將「name.value」替換爲「email.value」時，代碼將起作用。我現在不知道現在有什麼問題。如果有人可以幫助我..

來源

2015-06-08 Mirza Muneeb

看起來像編號爲name的輸入在JavaScript執行時並未在DOM中創建。您可以通過將代碼中window.onload代碼塊或內部form.onsubmit

var form = document.getElementById('form'); 
 

 
var email = document.getElementById('email'); 
 
var msg = document.getElementById('message'); 
 
var error = document.getElementById('error'); 
 

 
function handlingForm() {  
 
    form.onsubmit = function(c) { 
 
    var name = document.getElementById('name'); 
 
    if (name.value == "") { 
 
     error.innerHTML = "Error Submiting Form !"; 
 
     return false; 
 
    } else { 
 
     error.innerHTML = "You have successfuly submited the Form..! Congrats ;)"; 
 
     return true; // ;) Just Kidding :D 
 
    } 
 

 
    }; 
 
}; 
 
handlingForm();

<div id="container"> 
 

 
    <form id="form"> 
 
    <input type="text" placeholder="Name" id="name"> 
 
    <input type="text" placeholder="Email" id="email"> 
 
    <textarea rows="4" placeholder="Message" id="message"></textarea> 
 
    <input type="submit" value="Send" id="send"> 
 
    <p id="error"></p> 
 
    </form> 
 

 
</div>

來源

2015-06-08 22:34:09 MaxZoom

仍然沒有工作.. –

它適用於我，請重試。 – MaxZoom

對不起。等待我試試 –

的決心，如果name.value沒有價值，它是undefined。所以undefined !== ""，這就是它永遠不會是真的原因。只要做一個空檢查name.value。此外，您還需要移動name該函數內，因爲它第一次被調用時，value永遠是不確定的：

var form = document.getElementById('form'); 
 
var email = document.getElementById('email'); 
 
var msg = document.getElementById('message'); 
 
var error = document.getElementById('error'); 
 

 
function handlingForm() { 
 

 
    form.onsubmit = function(c) 
 
    { 
 
     var name = document.getElementById('name'); 
 
     if (!name.value) 
 
      { 
 
       error.innerHTML = "Error Submiting Form !"; 
 
       return false; 
 
      } 
 
      else 
 
      { 
 
       error.innerHTML = "You have successfuly submited the Form..! Congrats ;)"; 
 
       return true; // ;) Just Kidding :D 
 
      } 
 

 
    }; 
 
} 
 

 

 
window.onload = function(c) 
 
{ 
 
    handlingForm(); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>jsForm</title> 
 

 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 

 
</head> 
 
<body> 
 

 
    <div id="container"> 
 

 
     <form id="form"> 
 

 
      <input type="text" placeholder="Name" id="name"> 
 
      <input type="text" placeholder="Email" id="email"> 
 
      <textarea rows="4" placeholder="Message" id="message"></textarea> 
 
      <input type="submit" value="Send" id="send"> 
 
      <p id="error"></p> 
 
     </form> 
 

 
    </div> 
 

 
    <script src="script.js"></script> 
 
</body> 
 
</html>

來源

2015-06-08 22:35:28 TheDude

沒有工作，如果你把一個名字，並提交 –

修正了！在'onsubmit'函數 – TheDude

試試這個：

window.onload = handlingForm();

爲什麼你函數有c參數？

來源

2015-06-08 22:36:50

內移動'name'並不重要.. –

你的變量叫做name是個問題。它不工作，因爲name是一些實現中的預定義標識符。儘管它不是保留關鍵字，但最好避免將它用作變量名稱。

將它重命名爲name_（或幾乎任何其他），它會起作用。

來源

2015-06-08 22:44:42

這是由於如何在網頁中處理全局變量的一個怪癖。每個對象都被視爲window對象的屬性，因此當您將對象分配給email時，實際上您正在創建並分配給window.email，依此類推。

但是，窗口對象的某些屬性已經存在，並且對瀏覽器有特殊意義，如window.location（當前URL）和window.name（用於跨幀鏈接目標）。

要看到它在實踐中，做到這一點在全球範圍內（任何函數之外）：

var location;  // should be undefined, right? 
alert(location); // but it's actually window.location

因爲window.name特殊意義的，任何你分配給它（或全球name）會轉換成一個字符串。您嘗試存儲的元素變成一個字符串，因此不再用作元素。

要解決它，只需將你的代碼放到一個函數，使變量是本地，不再有這種奇怪的行爲。你可以使用你的window.onload函數。

來源

2015-06-08 22:49:49 deltab

Javascript「onsmit」事件不能正常工作

回答

相關問題