如何使用 JavaScript 拦截 HTML5 输入验证

Question

<form ... onsubmit="return false">
   <input type="text" name="location" ...>
   <input type="url" ... required>
   ...
</form>

现在，如果我输入一个位置并按 ENTER，浏览器会告诉我需要一个 URL，这不是预期或期望的结果。应该忽略 ENTER。

---

问题

如何防止浏览器在"位置"输入字段中按 ENTER 后检查必填字段，并且只让浏览器在使用 JavaScript 提交表单时检查"url"字段form.submit()？

Answer 1

您需要停止表单元素的输入按钮的默认行为。

让我们举个例子：

HTML5 表单为

<form id="form">
  <input type="text" name="test1" id="test1" required/>
  <input type="text" name="test2" id="test2" required/>
  <input type="submit" value="Test"/>
</form>

然后应用以下代码

$(document).ready(function() {
  $(form).find('input').on('keydown', function(e){
     if(e.which == 13) // KEY.ENTER = 13
       e.preventDefault();
  });
});

基于上述场景，这里是小提琴。

Answer 2

这就是我现在所做的和有效的（使用 jQuery，其中 $form 表示）：

$form.find('input').on('keydown', function(e){
    if(e.which == KEY.ENTER) // KEY.ENTER = 13
        e.preventDefault();
});

Answer 3

您可以在表单元素中使用 novalidate 属性：

<form method="post" action="..." novalidate>...</form>

Answer 4

有一种处理"提交"的特定方法。来了！