Javascript" onsubmit"事件无法正常工作

时间:2015-06-08 22:20:20

标签: 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>
&#13;
&#13;
&#13;

问题是,它没有验证它。每次在提交时返回true,但是当我替换&#34; name.value&#34;用&#34; email.value&#34;代码有效。我现在不知道问题到底是什么。如果有人可以帮助我......

5 个答案:

答案 0 :(得分:1)

看起来,在执行JavaScript时,不会在DOM中创建id为name的输入。 您可以通过将代码放在window.onload代码块中或form.onsubmit

中来解决此问题

&#13;
&#13;
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();
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您的名为name的变量是个问题。它不起作用,因为name在某些实现中是预定义的标识符。虽然它不是保留关键字,但最好不要将其用作变量名。

将其重命名为name_(或几乎任何其他内容),它会起作用。

答案 2 :(得分:0)

如果name.value没有值,则为undefined。所以undefined !== "",这就是为什么它永远不会成真。只需对name.value进行空检查。此外,您需要在该函数内部移动name,因为第一次调用它时,value将始终未定义:

&#13;
&#13;
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();
}
&#13;
<!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>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

试试这个:

window.onload = handlingForm();

为什么您的函数有c参数?

答案 4 :(得分:0)

这是由于网页中如何处理全局变量的怪癖。每个都被视为window对象的属性,因此当您分配到email时,您实际上正在创建并分配给window.email,依此类推。

但是,窗口对象的某些属性已经存在并且对浏览器具有特殊含义,例如window.location(当前URL)和window.name(用于跨框架链接目标)。 / p>

要在实践中看到它,请在全局范围内(在任何函数之外)执行此操作:

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

由于window.name的特殊含义,您分配给它(或全局name)的任何内容都将转换为字符串。您尝试存储的元素变为字符串,因此不再作为元素工作。

要修复它,只需将代码移动到一个函数中,以便变量是本地的,并且不再有这种奇怪的行为。您可以使用window.onload功能。