我的表单不适用于我的 Javascript 验证

Question

我不知道问题出在我的表单还是 javascript 上，但验证不起作用，我在控制台中没有收到任何错误。 任何人都可以检查并查看表格是否有效或问题出在 javascript

 const formSection = document.getElementById('davididhere'); const mailInput = document.getElementById('email'); const messageError = document.getElementById('error-messages'); formSection.addEventListener('submit', (e) => { if (mailInput.value === mailInput.value.toLowerCase()) { messageError.textContent = ''; } else { e.preventDefault(); messageError.textContent = '*email must be in lower case <br> * form not sent'; } })

 <section id="contactpage" class="form-section"> <div class="form-container"> <form action="https://formspree.io/f/myyvzkag" method="post" id="davididhere"> <ul class="form-info"> <li> <input type="text" maxlength="30" name="user_name" class="name-text-box" id="full-name" placeholder="Full Name" required="" /> </li> <li> <input type="email" name="user_email" class="name-last-text-box" id="email" placeholder="Email Address" required="" /> </li> <li> <textarea id="text-box" name="message" maxlength="500" class="enter-form" cols="30" rows="10" placeholder="Enter text here" required=""></textarea> </li> </ul> <input type="submit" value="Get in touch" class="send-btn" /> <small id="error-messages"></small> </form>

Answer 1

代码剪切在这里工作。 现在的问题是您是否期望控制台中出现某种错误，因为您声明您没有在那里收到任何东西。 除了已经定义的textContent之外，您还可以throw错误。

const formSection = document.getElementById('davididhere');
const mailInput = document.getElementById('email');
const messageError = document.getElementById('error-messages');

formSection.addEventListener('submit', (e) => {
  if (mailInput.value === mailInput.value.toLowerCase()) {
    messageError.textContent = '';
  } else {
    e.preventDefault();
    messageError.textContent = '*email must be in lower case <br> * form not sent';
    throw new Error('Email must be in lower case!');
  }
})