Question

我正在练习js。我试图在表单中进行一个非常简单的验证，但它随之而来，正如我所料，是一个错误。这是我的代码：

＆＃13;

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();
}

＆＃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;

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

Answer 1

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

中来解决此问题

＆＃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;

Answer 2

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

将其重命名为name_（或几乎任何其他内容），它会起作用。

Answer 3

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

＆＃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;

Answer 4

试试这个：

window.onload = handlingForm();

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

Answer 5

这是由于网页中如何处理全局变量的怪癖。每个都被视为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功能。

Javascript＆＃34; onsubmit＆＃34;事件无法正常工作

5 个答案: