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

Question

I don't know if the problem is with my form or my javascript but the validation isn't working and I'm not getting any errors in the console. Can anyone check and see the form is working or the problem is with the 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

Code snipped is working here. Now the question is do you expect some kind of an error in the console since you stated that you are not receiving anything there. You can throw an error in addition to already defined textContent .

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!');
  }
})