时间戳

首页 > 解决方案 > JavaScript document.forms 在 Chrome 中不起作用

javascript - JavaScript document.forms 在 Chrome 中不起作用

问题描述

我有个问题。你们能帮我看看代码有什么问题吗，因为即使我在没有填写输入文本框的情况下单击提交，也没有任何反应（没有出现警报）？
我将 index.html 文件和 javascript 文件放在同一个文件夹中，我认为路径没有问题，但我不知道为什么不运行。控制台内部出现

“未捕获的 TypeError：无法读取 script.js:1 处未定义的属性‘firstName’”

var getInput=document.forms["signup"]["firstName"];
function check(){
    if(getInput.value == ""){
        window.alert("Please enter a first name");
        getInput.focus();
        return false;
    }
    return true;
}
window.onload=check;
<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Sign up</title>
            <script src="./javascript/script.js"></script>
        </head>
        <body>
            <form name="signup" action="#" method="post" onsubmit="return check()">
                <label for="inputFirstName">First name</label>
                <input type="text" id="inputFirstName" value="" name="firstName">
                <input type="submit" value="Click Me">
            </form>
        </body>
    </html>

标签： javascripthtml

解决方案

这将正常工作：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sign up</title>
</head>
<body>
  <form name="signup" action="#" method="post" >
    <label for="inputFirstName">First name</label>
    <input type="text" id="inputFirstName" value="" name="firstName">
    <button type="submit">Click Me</button>
  </form>

  <script>
    const SignUpForm = document.forms["signup"]
      ;
    SignUpForm.onsubmit = e =>
      {
      if (!SignUpForm.firstName.value.trim())
        {
        window.alert("Please enter a first name");
        getInput.focus();
        e.preventDefault()
        }
      }
  </script>
</body>
</html>

推荐阅读