POST 请求前的表单验证

Question

So I have 2 functions, one is a async function that is basically a HTTP Post Request, the other one is a form validation. I want the POST Request function to trigger only if the form validation function returns true. The form validation looks like this:

regForm.addEventListener('submit', function(event){
  if (checkInputs()) {
    // trigger post request function
  }
})
function checkInputs() {
  const usernameValue = form.username.value.trim();
  const passwordValue = form.password.value.trim();
  const emailValue = form.email.value.trim();

  if (usernameValue === '') {
    // trigger another function that handles errors
   setError(form.username, 'Can\'t be blank');
  } else {
   // triggers function that handles success(color change, etc.)
   setSuccess(form.username);
  }

  if (passwordValue=== '') {
    // trigger another function that handles errors
   setError(form.password, 'Can\'t be blank');
  } else {
   // triggers function that handles success(color change, etc.)
   setSuccess(form.password);
  }
}

But this doesn't seem to work, it doesn't trigger the POST Request function.

Answer 1

It triggers, because you don't return anything from the checkInputs function.

You need to return boolean /true or false/.

Something like:

function checkInputs() {
  const usernameValue = form.username.value.trim();
  const passwordValue = form.password.value.trim();
  const emailValue = form.email.value.trim();
  let check = true;
  if (usernameValue === '') {
    // trigger another function that handles errors
    setError(form.username, 'Can\'t be blank');
    check = false;
  } else {
    // triggers function that handles success(color change, etc.)
    setSuccess(form.username);
  }

  if (passwordValue=== '') {
    // trigger another function that handles errors
    setError(form.password, 'Can\'t be blank');
    check = false;
  } else {
    // triggers function that handles success(color change, etc.)
    setSuccess(form.password);
  }

  return check;
}

Answer 2

inside function checkInputs(), create a variable let check = true , assign false to this variable in every if statement:

if (usernameValue === '') {
  setError()
  check = false;
}

return check; at the end of function.