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”事件不能正常工作

回答

相关问题