堆棧內存溢出
  簡體   English   中英

Javascript“onsubmit”事件無法正常工作

[英]Javascript " onsubmit " Event Not Working Correctly

 原文  2015-06-08 22:20:19  2   5    javascript/ html

問題描述

我只是在練習js。 我試圖在表單中進行非常簡單的驗證，但正如我所料，它帶來了一個錯誤。 這是我的代碼： 

 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 但當我用“email.value”替換“name.value”時，代碼就起作用了。 我現在不知道實際上是什么問題。 如果有人可以幫助我..

5 個解決方案

解決方案1
 1 已采納  2015-06-08 22:34:09

看起來像 id name的輸入在 JavaScript 執行時沒有在 DOM 中創建。 您可以通過將代碼放在window.onload代碼塊或form.onsubmit來解決該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>

解決方案2
 1  2015-06-08 22:44:42

您名為name變量是一個問題。 它不起作用，因為name在某些實現中是預定義的標識符。 盡管它不是保留關鍵字，但最好避免將其用作變量名。

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

解決方案3
 0  2015-06-08 22:35:28

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

解決方案4
 0  2015-06-08 22:36:50

嘗試這個：

window.onload = handlingForm();

為什么你的函數有c參數？

解決方案5
 0  2015-06-08 22:49:49

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

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

要在實踐中查看它，請在全局范圍內（在任何函數之外）執行此操作：

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

由於window.name的特殊含義，您分配給它（或全局name ）的任何內容都將轉換為字符串。 您嘗試存儲的元素變為字符串，因此不再作為元素工作。

要修復它，只需將您的代碼移動到一個函數中，以便變量是局部的並且不再具有這種奇怪的行為。 您可以為此使用window.onload函數。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 javascript onsubmit無法正常工作 onsubmit 事件處理程序 javascript 不起作用 在IE和Firefox中使用Javascript表單onSubmit無法正常工作 Javascript覆蓋表單onsubmit事件無效 Javascript onSubmit事件 JavaScript不能在onsubmit事件上運行 反應onSubmit事件不起作用 不起作用： <form onsubmit=“alert(event.shiftKey)”> 在javascript上 JavaScript驗證不起作用（onSubmit） JavaScript onsubmit無法正常工作？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM