form validation not workin - javascript-html

Question

Please guys i created a form validation program using html, css and javascript and i want the form to validate when they user input changes though i am not getting error but the form is not validating, can any one resolve my program and detect my mistakes

const loader       = document.querySelector('.loader'); 
// selecting inputs
const submitBtn    = document.querySelector('.submit-btn');
const names        = document.querySelector('#name');
const email        = document.querySelector('#email');
const password     = document.querySelector('#password');
const num          = document.querySelector('#number');
const tac          = document.querySelector('#terms-and-con');
const notification = document.querySelector('#notification');

/// showalert function
const showAlert = (msg) => {
  let alertMsg = document.querySelector('.alert-msg');
  let alertBox = document.querySelector('.alert-box');
  alertMsg.innerHMTL = msg;
  alertBox.classList.add('show');
  setTimeout(() => {
    alertBox.classList.remove('show');
  }, 3000)
}

/// send data function
const sendData = (path, data) => {
  fetch(path, {
    method: 'post',
    headers: new Headers({
      'Content-Type': 'application/json'
    }),
    body: JSON.stringify(data),

  }).then((res) => res.json()).then(response => {
    processData(response);
  })
}

/// submit button functionality

submitBtn.addEventListener('click', () => {
  if (name.value.length < 3) {
    // showAlert('name must be 3 letters long');(
    alert('bad input')
  } else if (!email.value.length) {
    showAlert('enter your email');
  } else if (password.value.length < 9) {
    showAlert('password should be eight letters long');
  }
})

this is the html program

<div>
  <input type="text" autocomplete="off" id="name" placeholder="name">
  <input type="email" autocomplete="off" id="email" placeholder="email">
  <input type="password" autocomplete="off" id="password" placeholder="password">
  </label>
  <br>
  <input type="checkbox" class="checkbox" id="notification">
  <label for="notification">receive  upcoming offers and events mails</label>
  <button class="submit-btn">create account</button>
</div>
<a href="/login" class="link">already have an account?. Login in here</a>
</div>

<div class="alert-box ">
  <img src="img/error.png" alt="" class="alert-image">
  <p class="error-message alert-msg">
    There is an error
  </p>
</div>

<< i created a form... >> there is no form element here... developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation — Mister Jojo
– Mister Jojo, Commented Apr 3, 2022 at 11:23

Razin · Accepted Answer · 2022-04-03 11:39:28Z

1

i think here

if(name.value.length < 3){ // name.value.length should be names.value.length as its 
                            // here const names = document.querySelector('#name');
                            // just a typo nothing to worry about your code should 
                            // work

and a suggestion check all three fields seprately regardless of if name is fine then check email and if email is fine then check password, btw your code is just fine it should work

answered Apr 3, 2022 at 11:39

Razin

1092 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

form validation not workin - javascript-html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related