I'm confused right now. It seems I'm missing something right here. Trying to submit the form, the code for the email field was running through the username. For instance, if I click on the submit button while the input for username and email were empty, the code for email, "email cannot be blank" would run through the username field. I need your response on this.
const form = document.getElementById("form");
const username = document.getElementById("username");
const email = document.getElementById("email");
const password = document.getElementById("password");
const confirmpass = document.getElementById("re-password");
form.addEventListener("submit", (e)=>{
e.preventDefault();
Checkvalue();
})
function Checkvalue(){
const userval= username.value.trim();
const emailval = email.value.trim();
const passwordval= password.value.trim();
const confirmpassval = confirmpass.value.trim();
if (userval == '') {
setErrorFor(username, 'username cannot be blank');
}else{
setSuccessFor(username);
}
if (emailval=='') {
setErrorFor(email, 'enter your mail');
}else if (!isEmail(emailval)) {
setErrorFor(emailval, "email is not valid");
} else {
setSuccessFor(email);
}
}
function setErrorFor(input, message){
const formContol = input.parentElement;
const small = document.querySelector('small');
small.innerText = message;
formContol.className = 'form-contol error'
}
function setSuccessFor(input){
const formContol = input.parentElement;
formContol.className = 'form-contol success'
}
function isEmail(email){
const re = /\S+@\S+\. \S+/;
return re.test(email);
}