我的表單不適用於我的 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!');
  }
})