提交表单时如何显示错误消息和图标

Question

我无法通过以下代码在我的 html 上执行我的 JS 代码。当我将 addEventListener 的“提交”更改为“输入”时，它可以工作。

  <form action="#" id="form">
  <input type="email" id="email" placeholder="Email Address" >
  <button type="submit" class="arrow"><img src="images/icon-arrow.svg" alt="submit"></button>
  <img src="images/icon-error.svg" alt="error" id="error-arrow" class = "hidden">
  
  <p id="error-message" class="hidden">Please provide a valid email.</p>
  </form>

const email = document.getElementById('email');
const error = document.getElementById('error-message');
const errorArrow = document.getElementById('error-arrow')
const form = document.getElementById('form');

form.addEventListener('submit', function (event) {
    if(email.validity.typeMismatch) {
        
        error.classList.remove('hidden');
        errorArrow.classList.remove('hidden');
        
    } else {
        email.setCustomValidity('');
    }
    event.preventDefault();
});

Answer 1

你拼错了submit， sumbit 应该是 submit 看看能不能解决问题