e.preventDefault（）不允许我提交我的表格

Question

我写了一些JavaScript来验证表单。但是，如果表单字段通过所有验证，则表单永远不会提交！我的代码是否以某种方式错误地阻止了表单能够提交？如果我删除所有JavaScript并使用浏览器的内置验证，那么表单可以正常执行，并且用户已添加到数据库中。

const form = document.getElementById('form');

const first_name = document.getElementById('first_name');
const last_name = document.getElementById('last_name');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');

// Show input error message
function showError(input, message) {
    input.className = 'form-control is-invalid';
    const small = input.parentElement.querySelector('small');
    small.className = 'invalid-feedback';
    small.innerText = message;
}

// Show success outline
function showSuccess(input, message) {
    input.className = 'form-control is-valid';
    const small = input.parentElement.querySelector('small');
    small.className = 'valid-feedback';
    small.innerText = message;
}


function checkRequired(inputArray) {
    inputArray.forEach(function(input) {
      if (input.value.trim() === '') {
        showError(input, `${getFieldName(input)} is required`);
        return false;
      } else {
        showSuccess(input, "Looks Good!");
        return true;
      }
    });
}

// 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, 'Looks Good!');
    return true;
  } else {
    showError(input, 'Email is not valid');
    return false;
  }
}

// Check input length
function checkLength(input, min, max) {
  if (input.value.length < min) {
    showError(
      input,
      `${getFieldName(input)} must be at least ${min} characters`
    );
    return false;
  } else if (input.value.length > max) {
    showError(
      input,
      `${getFieldName(input)} must be less than ${max} characters`
    );
    return false;
  } else {
    showSuccess(input, 'Looks Good!');
    return true;
  }
}

// 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) {

  if (!checkRequired([first_name, last_name, username, email, password, password2])) {
      e.preventDefault();
  }
  if (!checkLength(username, 3, 15)) {
      e.preventDefault();
  }
  if (!checkLength(password, 6, 25)) {
      e.preventDefault();
  }
  if (!checkEmail(email)) {
      e.preventDefault();
  }
  if (!checkPasswordsMatch(password, password2)) {
      e.preventDefault();
  }
});

Answer 1

您的checkRequired函数此刻从不返回任何内容：

function checkRequired(inputArray) {
    inputArray.forEach(function (input) {
        if (input.value.trim() === '') {
            showError(input, `${getFieldName(input)} is required`);
            return false;
        } else {
            showSuccess(input, "Looks Good!");
            return true;
        }
    });
}

[您正在回调内返回，但是回调忽略了它的返回值（并且您仍然不想在循环内返回true，只希望在所有迭代完成后返回true）

要查找第一个无效输入，请使用.find：

function checkRequired(inputArray) {
  const invalidInput = inputArray.find(input => input.value.trim() === '');
  if (invalidInput) {
    showError(input, `${getFieldName(invalidInput)} is required`);
    return false;
  }
  return true;
}

如果要为每个无效输入呼叫showError，则：

function checkRequired(inputArray) {
  let valid = true;
  for (const input of inputArray) {
    if (input.value.trim() === '') {
      valid = false;
      showError(input, `${getFieldName(input)} is required`);
    }
  }
  return valid;
}

Answer 2

您没有从checkRequired返回任何内容，因此其值始终为false。尽管应该没有性能问题，但使用for循环可能会更好，这样您就可以尽早休息。

function checkRequired(inputArray) {
    for (let input of inputArray) {
        if (input.value.trim() === '') {
            showError(input, `${getFieldName(input)} is required`);
            return false;
        }
    }

    return true;
}