0

我有这个带有 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它似乎有效。

4

4 回答 4

2

在这里扩展 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，这取决于您的验证逻辑是什么。

于 2013-01-21T18:58:27.723 回答
0

在你的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();
}
于 2013-01-21T18:46:28.923 回答
0

要防止在按 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;
于 2013-01-21T18:52:07.237 回答
0

我会将其更改为提交，尽管这并不是让您遇到麻烦的原因。出于某种奇怪的原因，浏览器程序员认为编写代码是一个好主意，以便浏览器假定表单中的按钮提交它们。您需要更改 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
  }
}
于 2013-01-21T18:53:21.557 回答