Question

我有一个输入，要求用户输入有效的电子邮件，然后在提交时清除输入。
IE中发生的问题是，如果用户一次提交了无效的电子邮件，则即使已提交有效的电子邮件，检测到的反馈（红色边框）仍然存在，因为输入已被清除。
提交有效输入后，有什么方法可以停止验证？

const form = document.querySelector('form');
const input = document.querySelector('input');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  /*
    stuff to do with the email
  */
  input.value = '';
})

<form>
  <input type="email" required>
  <button type="submit">submit</button>
</form>

Answer 1

代替手动清除输入，您只需在提交后重置表单即可：

const form = document.querySelector('form');
const input = document.querySelector('input');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  /*
    stuff to do with the email
  */
  //input.value = '';
  form.reset();
})

<form>
  <input type="email" required>
  <button type="submit">submit</button>
</form>

Answer 2

我找到了！看起来可以使用CSS来完成：）

Firefox似乎添加了一个自定义伪类，以向输入元素添加box-shadow，您也可以禁用它。

我做了这个JSFiddle。我的IE11显示“这是必填字段”消息，但没有显示红色边框

const form = document.querySelector('form');
const input = document.querySelector('input');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  /*
    stuff to do with the email
  */
  input.value = '';
})

/* Firefox */
input:-moz-ui-invalid{
  box-shadow:none;
}

/* Internet Explorer */
input:invalid{
    outline:none;
}

<form>
  <input type="email" required>
  <button type="submit">submit</button>
</form>

IE-如何在提交表单后从输入中禁用验证检测？

2 个答案: