I'm trying to validate some field and display error messages when the required fields are not filled out. I use preventDefault to stop the form from submitting until the fields are filled out.

Can anyone take a look at my code and let me know how I can bypass the preventDefault when all the required fields are correctly filled out?

Here is my code:

<script>
  // Script Validasi Form Daftar dan Masuk
  const form = document.getElementById('formRegister');
  const registerNama = document.getElementById('registerNama');
  const registerEmail = document.getElementById('registerEmail');
  const registerPassword = document.getElementById('registerPassword');
  const registerPassword2 = document.getElementById('registerPassword2');

  const formLogin = document.getElementById('formLogin');
  const loginEmail = document.getElementById('loginEmail');
  const loginPassword = document.getElementById('loginPassword');

  form.addEventListener('submit', (e) => {
    e.preventDefault();

    checkInputs();
  });

  formLogin.addEventListener('submit', (e) => {
    e.preventDefault();

    checkInputsLogin();
  });

  function checkInputs() {
    // Nangkep Value dar input
    const namaValue = registerNama.value; 
    const emailValue = registerEmail.value.trim();
    const passwordValue = registerPassword.value.trim();
    const password2Value = registerPassword2.value.trim();

    if(namaValue === '') {
      // error
      // nambahin error class
      setErrorFor(registerNama, 'Masukkan nama anda');
    }else{
      // success class
      setSuccessFor(registerNama);
    }

    if(emailValue === '') {
      // error
      // nambahin error class
      setErrorFor(registerEmail, 'Masukkan email anda');
    }else{
      // success class
      setSuccessFor(registerEmail);
    }

    if(passwordValue === '') {
      // error
      // nambahin error class
      setErrorFor(registerPassword, 'Masukkan password anda');
    }else if(!isRegisterPassword(passwordValue)){
      setErrorFor(registerPassword, ' ');
    }else{
      // success class
      setSuccessFor(registerPassword);
    }

    if(password2Value === '') {
      // error
      // nambahin error class
      setErrorFor(registerPassword2, 'Masukkan kata sandi anda');
    } else if(passwordValue !== password2Value){
      setErrorFor(registerPassword2, 'Kata sandi anda tidak cocok.');
      setErrorFor(registerPassword, ' ');
    }else if(!isRegisterPassword2(password2Value)){
      setErrorFor(registerPassword2, 'Kata sandi minimal 8 karakter.');
    }else{
      // success class
      setSuccessFor(registerPassword2);
    }
  }

  function checkInputsLogin() {
    // Nangkep Value dar input
    const emailValue = loginEmail.value.trim(); 
    const passwordValue = loginPassword.value.trim();

    if(emailValue === '') {
      // error
      // nambahin error class
      setErrorFor(loginEmail, 'Masukkan email anda');
    }else{
      // success class
      setSuccessFor(loginEmail);
    }

    if(passwordValue === '') {
      // error
      // nambahin error class
      setErrorFor(loginPassword, 'Masukkan password anda');
    }else if(!isLoginPassword(passwordValue)){
      setErrorFor(loginPassword, 'Kata sandi minimal 8 karakter.');
    }else{
      // success class
      setSuccessFor(loginPassword);
    }
  }

  function setErrorFor(input, message) {
    const formControl = input.parentElement;
    const small = formControl.querySelector('small');

    // error message
    small.innerText = message;

    // error class
    formControl.className = 'form-control-akun error'
  }

  function setSuccessFor(input, message) {
    const formControl = input.parentElement;
    formControl.className = 'form-control-akun success'
  }

  function isRegisterPassword(registerPassword){
    return /.{8,}$/.test(registerPassword);
  }
  function isRegisterPassword2(registerPassword2){
    return /.{8,}$/.test(registerPassword2);
  }

  function isLoginPassword(loginPassword){
    return /.{8,}$/.test(loginPassword);
  }

</script>

CodePudding user response：

You can submit your form from javascript instead of bypassing the preventDefault.

form.addEventListener('submit', (e) => {
  e.preventDefault();

  if (checkInputs()) form.submit();
 });

just remember to return true/false from checkInputs function

function checkInputs() {
    //YOUR CODE
    const namaValue = registerNama.value; 
    const emailValue = registerEmail.value.trim();
    const passwordValue = registerPassword.value.trim();
    const password2Value = registerPassword2.value.trim();
    //NEW VAR
    let result = false;
    
    if(namaValue === '') {
      // error
      // nambahin error class
      setErrorFor(registerNama, 'Masukkan nama anda');
      result = false;
    }else{
      // success class
      setSuccessFor(registerNama);
      result = true;
    }

    if(emailValue === '') {
      // error
      // nambahin error class
      setErrorFor(registerEmail, 'Masukkan email anda');
      result = false
    }else{
      // success class
      setSuccessFor(registerEmail);
      result = true;
    }
    //....
    //etc
    return result;
 }