javascript - 是什么阻止我的验证函数在表单为空时不运行？

Question

没有传递函数的表单到底发生了什么？我正在尝试使用此函数验证表单是否为空:

JS:

function validateForm() {
    console.log("Validate");
    var y = document.forms["form"]["itemEntered"].value;
    if (y == null || y == "") {
        alert("Must enter an item");
        return false;
    }
}

HTML:

<div>
      <div id="center-container">
        <h4>Enter an Item for Your Shopping List:</h4>
        <hr />
        <form name="form" onsubmit="return validateForm()" method="post" >
          <label for="item">Item:</label> 
          <input required type="text" placeholder="Shopping Items" id="item" name="itemEntered" autocomplete="off" />
          <input type="button"  value="Enter" id="Enter" onclick="javascript:addItem();" />
        </form>
      </div>
    </div>

在 Code Pen 中运行的项目 http://cdpn.io/JGCDB

您可以看到，即使该字段为空，它仍然显示在列表中。

我也试过在 form 标签中使用 required 属性，但没有用。

Answer 1

我发现您的代码存在一些问题，首先，onclick 将在验证之前执行，其次，您将输入声明为“按钮”而不是“提交”，因此点击不会触发表单提交事件。以下是更正后的代码，希望对您有所帮助。

<script type='text/javascript'>
function validateForm() {
    console.log("Validate");
    var y = document.forms["form"]["itemEntered"].value;
    if (y == null || y == "") {
        alert("Must enter an item");
        return false;
    }

    alert('passed validation...');
    addItem();
    return true;
}

function addItem() {
   alert('adding item...');
}
</script>

这是标记。

<div>
      <div id="center-container">
        <h4>Enter an Item for Your Shopping List:</h4>
        <hr />
        <form name="form" onsubmit="return validateForm()" method="post" >
          <label for="item">Item:</label> 
          <input required type="text" placeholder="Shopping Items" id="item" name="itemEntered" autocomplete="off" />
          <input type="submit" value="Enter" id="Enter" />
        </form>
      </div>
    </div>
</body>