为什么我的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中pattern元素的<input>属性作为新浏览器的验证形式（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
  }
}