如何防止表单验证错误消息但仍然验证？

Question

我在互联网上到处寻找解决这个问题的方法，但找不到任何答案。如果我不清楚，这是我要删除的内容：

示例代码：

<form action="search.html" id="form">
  <input type="text" placeholder="Search..." name="s" id="s" required>
  <button type="submit">Submit</button>
</form>

此外，对于 <input type="">，我正在做的事情是 type="search" 而不是 type="text" 更好吗？
如果需要使用 HTML 以外的任何东西，请尽可能不要使用 jquery。

Answer 1

您可以使用 setCustomValidity:

<form action="search.html" id="form">
  <input type="text" placeholder="Search..." name="s" id="s" oninvalid="this.setCustomValidity(' ')" required>
  <button type="submit">Submit</button>
</form>

我不确定您为什么必须指定 space (" ") 作为有效性消息，但如果您应用空字符串，它显然会被忽略。

Answer 2

如果你想让它表现得像Google，那么你可以监听表单上的submit事件，然后使用.preventDefault()阻止表单提交，如果输入值为空。另一个例子见。

form = document.querySelector('form');
input = document.querySelector('input');

form.addEventListener('submit', function(event) {
  if (input.value == '') {
    event.preventDefault(); // prevent the form from submitting
  }      
});

<form>
  <input type="search" />
  <button>
    Submit?
  </button>
</form>

另一个用户体验稍微好一点的选项是默认禁用该按钮，然后在文本输入字段有一些值时启用它。当用户在输入字段中输入内容时，这至少会为用户提供一些反馈（按钮会启用）。

input = document.querySelector('input');
button = document.querySelector('button');

input.addEventListener('input', function(event) {
  if (input.value == '') {
    button.disabled = true;
  } else {
    button.disabled = false;
  }
});

<form>
  <input type="search" />
  <button disabled>
    Submit?
  </button>
</form>

如何防止表单验证错误消息但仍然验证？

How to prevent form validation error message but still validate?

javascript

forms

validation