javascript - 为什么我的 HTML 表单会被提交?

标签 javascript html

我的表单有 1 个字段。我希望当用户点击或点击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 中它似乎可以工作。

最佳答案

扩展 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 位数字(仅限数字字符),我们还可以使用 pattern <input> 上的属性HTML5 中的元素作为较新浏览器(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,这取决于您的验证逻辑。

关于javascript - 为什么我的 HTML 表单会被提交?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14445156/

相关文章:

html - 将文本在缩略图的中间垂直对齐

javascript - this.context 在使用 react-router 时不包含 router

javascript - 为 C3JS 定制的工具提示

javascript - 如何检测 HTML 元素的类何时更改?

html - Bootstrap 折叠面板在展开时变得太大

javascript - 删除 Chrome/Chromium 中选项卡的 localStorage、databaseStorage

html - 更改转换为 AttributedString 的 html 的链接颜色和下划线颜色

javascript - 如何创建传奇d3?

javascript - 在Javascript中将长数字转换为1M、1K等

javascript - 如何在ajax请求后自动选择html输入中的 "select"选项?