为什么要提交我的 HTML 表单？

Question

我有这个带有 1 个字段的表单。我希望当用户 clicks 或点击 enter 时，它应该调用一个 JavaScript 函数来进行验证并显示错误消息或提交表单。

但是，当点击enter 时，它无论如何都会提交表单。 （到目前为止，在我的 JavaScript 验证函数中，我只有 alert ("Hello World")）

<form  action="add-another-number-to-dnc.cshtml" method="post" id="addDNCform">
    <h4>Enter 10-digit phone number without dashes, dots or parenthesis</h4> 
    <input type="text" name="pn" required placeholder="phone number" 
        title="Phone Number to Add to Do-Not-Call List" 
        onkeypress="if (event.keyCode == 13) document.getElementById('btnVldt').click()"/> <!-- all this is to treat [Enter] as a click -->
    <input id="btnVldt" type="button" value="Add Number to Do Not Call list" onclick="submitDNC()"/>
</form>

我在jsFiddle中添加了所有页面代码，您可以在其中测试和验证：

• 点击按钮时，没有正确提交表单
• 点击enter 时，它会给您一个错误 404，这一定意味着它正在尝试加载页面。

添加了这个：

实际上，如果我使用submit 而不是button，点击时它也不起作用。但是，在 jsFiddle 中它似乎可以工作。

Answer 1

在这里扩展 Praveen 的答案，我将“不显眼地”编写 JavaScript 以进一步分离功能、表示和内容：

HTML

<form action="add-another-number-to-dnc.cshtml" method="post" id="addDNCform">
    <h4>Enter 10-digit phone number without dashes, dots or parenthesis</h4> 
    <input type="text" name="pn" required placeholder="phone number"  title="Phone Number to Add to Do-Not-Call List" />
    <button type='submit'>Add Number to Do Not Call list"</button>
</form>

(X)HTML5

假设您希望框中有一个 10 位数字（仅限数字字符），我们还可以在 HTML5 中使用 <input> 元素上的 pattern 属性作为对较新浏览器（Firefox、Chrome , IE10, Opera):

<form action="add-another-number-to-dnc.cshtml" method="post" id="addDNCform">
    <h4>Enter 10-digit phone number without dashes, dots or parenthesis</h4> 
    <input type="text" name="pn" required placeholder="phone number" title="Phone Number to Add to Do-Not-Call List" pattern="[0-9]{10}" />
    <button type='submit'>Add Number to Do Not Call list"</button>
</form>

JavaScript（放置在页面某处的<script>标签内）

function submitDNC(event) {
    var valid = false;

    alert('Hello world');
    // your validation logic goes here, sets valid to TRUE if it's valid

    if(!valid) {
        event.preventDefault();
    }
}

document.getElementById('addDNCform').addEventListener( 'submit', submitDNC, false );

如果您要做的只是在提交表单时进行验证，则无需单击任何合成按钮。很快使用 HTML5，我们甚至可能不需要 JavaScript，这取决于您的验证逻辑是什么。

Answer 2

在您的submitDNC() 函数中，提供return false;。

function submitDNC()
{
    alert("Hello World!");
    return false;
}

另一件事是将input 类型从button 更改为submit。使用：

<input id="btnVldt" type="submit"
       value="Add Number to Do Not Call list" onclick="return submitDNC();" />

说明

事件处理程序的返回值决定了默认浏览器行为是否也应该发生。在点击链接的情况下，这将是跟随链接，但差异在表单提交处理程序中最为明显，如果用户输入信息错误，您可以取消表单提交。

---

另一种选择

正如Rink 所说，return false; 对于可以而且应该由preventDefault() 处理的事情来说太过分了。因此，您可以通过使用不显眼的 JavaScript 来做到这一点。

function submitDNC()
{
    alert("Hello World!");
    var e = window.event;
    e.preventDefault();
}

Answer 3

要防止在按 ENTER 时提交，请使用以下代码：

function checkEnter(e){
    e = e || event;
    var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
    return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}

然后，将处理程序添加到form：

document.querySelector('form').onkeypress = checkEnter;

Answer 4

我会将其更改为提交，尽管这并不是让您遇到麻烦的原因。出于某种奇怪的原因，浏览器程序员认为编写代码是个好主意，以便浏览器假定表单中的按钮提交它们。您需要更改 onkeypress 以调用函数。在该函数中执行以下操作：

function keyPressPhone() {
  if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
    document.getElementById("addDNCform").submit();
    return true;
  }
  else {
    return false; // somehow prevents the form from being submitted
  }
}