Javascript 未捕获的 ReferenceError：未定义表单

Uncaught ReferenceError: form is not defined

提问by FaithR

Can't for the life of me figure this out. any help would be greatly appreciated!

不能为我的生活弄清楚这一点。任何帮助将不胜感激！

This is the message I receive in Google Chrome when I test the script:

这是我在测试脚本时在 Google Chrome 中收到的消息：

Navigated to http://localhost/contact.phpform2.js:2 Uncaught ReferenceError: form is not definedform2.js:2 validatecontact.php:24 onsubmit Navigated to http://localhost/contact.php

导航到http://localhost/contact.phpform2.js:2 Uncaught ReferenceError: form is not definedform2.js:2 validatecontact.php:24 onsubmit 导航到http://localhost/contact.php

My contact.php file:

我的contact.php文件：

<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="form2.js"></script>



<?php require 'Includes/Header.php'; ?>

    <div class="wrapper">
        <div id="contact-form">
        <h5>Contact Form</h5>
    <form name="contact" form method="post" action="contact.php" 
    onsubmit="return validate(contact)">

        <label for="name">Name:</label>
        <input type="text" id="name" name="name">

        <label for="email">Email:</label>
        <input type="email" id="email" name="email">

        <label for="message">Message:</label>
        <textarea id="message" name="message"></textarea>


        <button type="submit">Submit</button>
        </form>         
            <div class="clear"></div>
    </div>
    </div>


   <?php require 'Includes/Footer.php'; ?>

My form2.js file:

我的 form2.js 文件：

    function validate(contact){
    var name = form.name.value;
    var email = form.email.value;
    var message = form.message.value;

    if (name.length == 0 || name.length > 200)
    {alert ("You must enter a name.");
    return false;
    }

    if (email.length == 0 || email.length > 200)
    {alert ("You must enter a email.");
    return false;
    }

    if (message.length == 0)
    {alert ("You must enter a message.");
    return false;
    }

    return true;
}

回答by Kevin Smith

form is a javascript object. That object does not exist within this file, which is why the error is being thrown. If you want to validate this form, you need to get a reference to it from the DOM first, using document.contact.

表单是一个 javascript 对象。该对象不存在于该文件中，这就是抛出错误的原因。如果您想验证此表单，您需要首先使用 document.contact 从 DOM 获取对它的引用。

function validate(contact){
  var form = document.contact,
      name = form.name.value,
      email = form.email.value,
      message = form.message.value;

  if (name.length == 0 || name.length > 200) {
    alert ("You must enter a name.");
    return false;
  }

  if (email.length == 0 || email.length > 200) {
    alert ("You must enter a email.");
    return false;
  }

  if (message.length == 0) {
    alert ("You must enter a message.");
    return false;
  }

  return true;
}

回答by silverfighter

Access forms like this

像这样访问表单

<form action="#" name="test_form">
    <input name="firstname" value="hello world"/>
  </form>

var valueOfInput = document.test_form.firstname.value

you can also go like documents.forms["test_form"].elements

so maybe passing in document.contact can help ...

所以也许传入 document.contact 可以帮助...

otherwise look at libraries like jQuery which give you a nice api to access DOM elements.

否则看看像 jQuery 这样的库，它为您提供了一个很好的 api 来访问 DOM 元素。

回答by Aswin Ramakrishnan

The error is what it says. You don't have a formvariable defined (From what you've shared).

错误就是它所说的。您没有form定义变量（来自您共享的内容）。

Also, it looks like you're trying to validate your form by accessing the values of the input fields. Here is how you should / could do it -

此外，您似乎正在尝试通过访问输入字段的值来验证表单。这是您应该/可以如何做到的-

function validate(contact){
   var name = document.getElementsByName('name')[0].value;
   // You can also do the following
   // var name = document.getElementById('name').value;
   // var name = document.forms['contact'].elements['name'].value;

   var email = document.getElementsByName('email')[0].value;
   var message = document.getElementsByName('message')[0].value;

   if (name.length == 0 || name.length > 200)
   {
     alert ("You must enter a name.");
     return false;
   }

   if (email.length == 0 || email.length > 200)
   {  
      alert ("You must enter a email.");
      return false;
   }

  if (message.length == 0)
  {  
    alert ("You must enter a message.");
    return false;
  }

  return true;
}

回答by Thomas Baumann

try using jquery by adding

尝试通过添加使用 jquery

<script type="text/javascript" charset="utf-8"  src="./jquery-1.9.1.js" />

to the header (you will have to download it or then add:

到标题（您必须下载它或添加：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

to get the latest) then in your function get the values of the input fieds as follow:

获取最新信息）然后在您的函数中获取输入字段的值，如下所示：

var name = $('#name').value;
var email = $('#email').value;
var message = $('#message').value;