JavaScript Assignment Help

// Form validation with detailed error messages
document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('registration-form');
  const username = document.getElementById('username');
  const email = document.getElementById('email');
  const password = document.getElementById('password');
  const confirmPassword = document.getElementById('confirm-password');
  
  // Show input error message
  function showError(input, message) {
    const formControl = input.parentElement;
    formControl.className = 'form-control error';
    const small = formControl.querySelector('small');
    small.innerText = message;
  }
  
  // Show success outline
  function showSuccess(input) {
    const formControl = input.parentElement;
    formControl.className = 'form-control success';
  }
  
  // Check email is valid
  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);
      return true;
    } else {
      showError(input, 'Email is not valid');
      return false;
    }
  }
  
  // Check required fields
  function checkRequired(inputArr) {
    let isValid = true;
    inputArr.forEach(input => {
      if (input.value.trim() === '') {
        showError(input, `${getFieldName(input)} is required`);
        isValid = false;
      } else {
        showSuccess(input);
      }
    });
    return isValid;
  }
  
  // Check passwords match
  function checkPasswordsMatch(input1, input2) {
    if (input1.value !== input2.value) {
      showError(input2, 'Passwords do not match');
      return false;
    }
    return true;
  }
  
  // Get fieldname
  function getFieldName(input) {
    return input.id.charAt(0).toUpperCase() + input.id.slice(1);
  }
  
  // Event listeners
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    
    const isRequiredValid = checkRequired([username, email, password, confirmPassword]);
    const isEmailValid = checkEmail(email);
    const doPasswordsMatch = checkPasswordsMatch(password, confirmPassword);
    
    if (isRequiredValid && isEmailValid && doPasswordsMatch) {
      // Form is valid - submit data
      console.log('Form is valid, submitting data...');
      // Here you would typically send the data to a server
    }
  });
});