如何提交表单并绕过 preventDefault

Posted 2023-05-08

【中文标题】如何提交表单并绕过 preventDefault

【英文标题】：How to Submit Form and Bypass preventDefault

【发布时间】：2021-11-19 08:27:29

【问题描述】：

我正在尝试验证某些字段并在未填写必填字段时显示错误消息。我使用 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>

【参考方案1】：

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

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

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

只记得从 checkInputs 函数返回真/假

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;
 

【讨论】：

我是 Js 新手。那你能告诉我怎么做吗？