My Form isn't working with my Javascript validation

David630 0
Viewed 32

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>

my css

@media screen and (min-width: 768px) {
  .greet {
    background: url(desktop2.svg) no-repeat 100% 0%;
  }


  .grid-containers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .picture-box {
    background: url(planeleft.svg) no-repeat 0% 20%,
      url(planeright.svg) no-repeat 100% 100%;
  }


  .send-btn {
    display: none;
  }

the .send-btn is the problem when it doesn't display in the desktop version it stops working with my function. So I need to figure out how to use media queries to work both breakpoints.
javascript html
1 Answers

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