0

更具体地说，当我们提交应该包含信息的空表单时，应该提交一个警告说“请输入一个值”它会这样做，但是在警告上选择好之后它仍然会在提交时发送电子邮件。我希望如果出现错误，他们必须满足表单的要求，然后才能发送提交的电子邮件。代码是：

这将检查字段中是否有任何值

function notEmpty(elem, helperMsg) {
    if (elem.value.length >= 2) {
        return true;
        alert(helperMsg);
        elem.focus();
        return false;
    }
    return true;
}

表格的开头：

<form method="get" onsubmit="notEmpty();" action="http://www.censoredgaming.co.uk/cgi-bin/mailer.pl">

提交按钮：

<input type="submit" name='Submit' value="Send" onClick='notEmpty();'>

欢迎对我们的问题有任何见解！

4

2 回答 2

3

这将失败有几个原因。

您将遇到的第一个是，因为您在调用时不传递任何参数notEmpty，所以变量elem将是undefined. 当您尝试访问其上的属性 ( value) 时，将引发异常并且函数将停止。

让我们从顶部开始。

首先，我们将使用更现代的方法来应用事件处理程序。

提供一种方法来识别您要处理的表单。id 属性是一个很好的通用选择（但使用比我更有意义的名称）：

<form id="myForm"
      method="get"
      action="http://www.censoredgaming.co.uk/cgi-bin/mailer.pl">

接下来，在 DOM 中获取对表单的引用并向其添加事件侦听器：

document.getElementById('myForm').addEventListener('submit', notEmpty);

请注意，您必须在将表单添加到 DOM后执行此操作。实现这一点的最简单方法是将您<script>的放在后面</form>（就在前面</body>是一个受欢迎的地方）。您还可以使用在 DOM 准备好或文档已加载时触发的事件处理程序。

旧版本的 Internet Explorer 不支持addEventListerner，如果您想支持它们，请参阅具有兼容性例程的 MDN 文档。

接下来，更新notEmpty功能。由于它是一个事件处理程序，它会得到一个参数——一个事件对象。它还将在绑定到的元素（表单）的上下文中调用。

function notEmpty(event) {
    var aForm = this;
}

您想检查某个元素是否具有一定长度的值，但您的问题中没有此类元素的迹象。让我们使用这个例子：

<label> Some data <input name="example"></label>

您可以通过表单的元素集合引用该元素：

function notEmpty(event) {
    var aForm = this;
    var input = aForm.elements.example;
}

现在您可以添加您的测试：

function notEmpty(event) {
    var aForm = this;
    var input = aForm.elements.example;
    if (input.length >= 2) {

    } else {

    }
}

如果您不想提交表单，请阻止对事件的默认操作：

function notEmpty(event) {
    var aForm = this;
    var input = aForm.elements.example;
    if (input.length >= 2) {
        // At least two characters, all is well
    } else {
       alert("An error");
       input.focus();
       event.preventDefault();
    }
}
于 2013-03-22T21:41:57.783 回答
0

你的第一个return true应该被删除：P

于 2013-03-22T21:38:58.907 回答