Question

我为表单编写了验证码：

function checkWholeForm(theForm) {
  // Create validation variables
  var valid = true;
  var validationMessage = "Please correct the following errors: \r\n";

  // Validate name
  if (document.getElementById('name').value.length == 0)
        {
            validationMessage = validationMessage + '  - Name is missing\r\n';
            valid = false;
        }

//(and there's a few other functions)

// Display alert box with errors if any errors found
  if (valid == false)
        {
            alert(validationMessage);
        }

        return valid;

  }

然后在HTML页面中，它会：

<form action="submit.php" method="post" enctype="text/plain" onsubmit="return checkWholeForm(this)">

并在表中是：

<input type="text" id="name" name="name" size="20" value="" />

但是当我点击提交时，空文本框不会触发警报。我做错了什么？

编辑：http://jsbin.com/uvepin/2/edit获取完整的HTML和JS。

Answer 1

好的，很多问题，你使用的是getElementById，但你的id没有设置为电子邮箱，也是为了进行表单验证，从type = submit更改为type = button并使用onclick而不是onsubmit

我编辑的版本： http://jsbin.com/ujeval/1/

Answer 2

如果您打开浏览器的控制台（Chrome和IE中的F12; FF中的ctrl-shift-K），您会看到代码出现此错误：

Uncaught ReferenceError: validationMessage is not defined

...因为您将变量声明为validMess。然后，在您对问题的更新中，您将其重命名为validMessage。但您的其他代码仍然指的是validationMessage。

// WRONG:
var validMessage = "Please correct the following errors: \r\n";

// RIGHT:
var validationMessage = "Please correct the following errors: \r\n";

演示：http://jsfiddle.net/JH8hg/

更新以使用您的最新更新：

在您的jsbin.com演示中，您尝试向按钮添加onsubmit处理程序：

<input class="button" name="send" type="submit" value="Send!" onsubmit="return checkWholeForm(this)" />

...但按钮没有onsubmit事件，因此应将其添加到表单元素中：

<form action="mailto:chandra.apoorv@gmail.com" method="post" enctype="text/plain"
      onsubmit="return checkWholeForm(this)">

该表单元素没有结束</form>标记。

您忘记在电子邮件字段中输入id="email"，这意味着当您尝试使用document.getElementById('email').value.length时出现JS错误。

修复了这些问题的工作演示： http://jsbin.com/ukepuh/1/edit

JavaScript输入字段验证

2 个答案: