未捕获的ReferenceError:未定义表单

时间:2015-02-06 18:47:34

标签: javascript forms

我的生活不能解决这个问题。任何帮助将不胜感激!

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

导航至http://localhost/contact.php form2.js:2未捕获的ReferenceError:表单未定义form2.js:2 validatecontact.php:24 onsubmit 导航到http://localhost/contact.php

我的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'; ?>

我的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;
}

4 个答案:

答案 0 :(得分:4)

form是一个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;
}

答案 1 :(得分:0)

访问此类表单

<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

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

否则看看像jQuery这样的库,它为你提供了一个访问DOM元素的好API。

答案 2 :(得分:0)

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

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

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

答案 3 :(得分:0)

尝试使用jquery添加

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

到标题(您必须下载它,然后添加:

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

获取最新信息) 然后在你的函数中获取输入fieds的值如下:

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