I am trying to make form validation with javascript but email validation not working

Question

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>

Answer 1

according to your code snippets

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.