表单验证不起作用 - 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>

Answer 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