如何提交表单并绕过 preventDefault

Question

我正在尝试验证某些字段并在未填写必填字段时显示错误消息。我使用 preventDefault 来阻止表单提交，直到字段填写完毕。

任何人都可以看看我的代码并告诉我如何在正确填写所有必填字段后绕过 preventDefault 吗？

这是我的代码：

<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>

Answer 1

您可以从 javascript 提交表单，而不是绕过 preventDefault。

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

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

请记住从 checkInputs 函数 return true/false

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;
 }

如何提交表单并绕过 preventDefault

How to Submit Form and Bypass preventDefault

javascript

validation

preventdefault