我的表单有 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/