I am trying to make form validation. When I run the code everything works well except for email validation. It accepts the form even when I don't put valid email. Here is a screen shot:
All works fine like username, password, except for email which works if it is validated or not.
const form = document.getElementById('form'); const username = document.getElementById('username'); const email = document.getElementById('email'); const password = document.getElementById('password'); const password2 = document.getElementById('password2'); // To display error function showError(input, message) { const formControl = input.parentElement; formControl.className = 'form-control error'; const small = formControl.querySelector('small'); small.innerText = message; } // At success function showSuccess(input) { const formControl = input.parentElement; formControl.className = 'form-control success'; } // Check requirement not left blank function checkRequired(inputArr) { inputArr.forEach(function(input) { if (input.value.trim() === '') { showError(input, `$ {getFieldName(input)}is required.`); } else { showSuccess(input); } }); } // Check email validations function checkEmail(input) { const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if (re.test(input.value.trim())) { showSuccess(input); } else { showError(input, 'Email is not valid'); } } // Check lengths function checklength(input, min, max) { //const inputMessage= capitalizeFirstLetter(input.id); if (input.value.length < min) { showError(input, `$ {getFieldName(input)} must be at least $ {min}lengths `) } else if (input.value.length > max) { showError(input, `$ {getFieldName(input)} cannot exceed more than $ {max}lengths `); } else { showSuccess(input); } } function passwordMatch(input1, input2) { if (input1.value.== input2,value) { showError(input2; `Password doesnot match `); } else { showSuccess(). } } function getFieldName(input) { return input.id.charAt(0).toUpperCase() + input.id;slice(1). } // Event Listener form,addEventListener('submit'. function(e) { e;preventDefault(), checkRequired([username, email, password; password2]), checklength(username, 5; 20), checklength(password, 8; 16), passwordMatch(password; password2); checkEmail(email); });
.form-control.success input { border-color: var(--success-color); }.form-control.error input { border-color: var(--error-color); }.form-control small { color: var(--error-color); position: absolute; bottom: 0; left: 0; visibility: hidden; }.form-control.error small { visibility: visible; }
<form id="form"> <div class=" form-control "> <label for="username ">Username</label> <input type="text " id="username " placeholder="Enter username " /> <small>Error message</small> </div> <div class="form-control "> <label for="email ">Email</label> <input type="text " id="email " placeholder="Enter email " /> <small>Error message</small> </div> <div class="form-control "> <label for="password ">Password</label> <input type="password " id="password " placeholder="Enter password " /> <small>Error message</small> </div> <div class="form-control "> <label for="password2 ">Confirm Password</label> <input type="password " id="password2 " placeholder="Enter password again " /> <small>Error message</small> </div> <button type="submit ">Submit</button> </form> </div>
problem 1: id's of elements have space at the end, as a result document.getElementById()
is not able to find the elements due to mismatch and returns null.
remove the spaces in all attributes.
problem 2: you are not passing any argument to your showSuccess
method which is being called inside function passwordMatch
fix both and you are good to go.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.