正确验证后未发送联系表格

Question

我使用 node.js 作为后端联系表单，使用 nodemailer 发送消息。 我的问题是，每当我正确填写输入时，它仍然会向我显示一个错误，即我的输入不正确并且它不会发送消息。 先感谢您

这是我的代码：

验证

function checkInputs() {
  const nameValue = name.value.trim();
  const emailValue = email.value.trim();
  const numberValue = number.value.trim();
  const subjectValue = subject.value.trim();
  const messageValue = message.value.trim();
  const humanValue = human.value.trim();

  if (nameValue === '') {
    setErrorForName(name, 'Name cannot be blank');
  } else {
    setSuccessForName(name);
  }

  if (emailValue === '') {
    setErrorForEmail(email, 'Email cannot be blank');
  } else if (!isEmail(emailValue)) {
    setErrorForEmail(email, 'Not a valid email');
  } else {
    setSuccessForEmail(email);
  }

  if (numberValue === '') {
    setErrorForNumber(number, 'Number cannot be blank');
  } else {
    setSuccessForNumber(number);
  }

  if (subjectValue === '') {
    setErrorForSubject(subject, 'Subject cannot be blank');
  } else {
    setSuccessForSubject(subject);
  }

  if (messageValue === '') {
    setErrorForMessage(message, 'Message cannot be blank');
  } else {
    setSuccessForMessage(message);
  }

  if (humanValue !== '4') {
    setErrorForHuman(human, 'Please answer the question above');
  } else {
    setSuccessForHuman(human);
  }
}

留言 function

function sendMessage() {
  const formData = {
    name: name.value,
    email: email.value,
    number: number.value,
    subject: subject.value,
    message: message.value,
    human: human.value,
  };

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/');
  xhr.setRequestHeader('content-type', 'application/json');
  xhr.onload = function () {
    console.log(xhr.responseText);
    if (xhr.responseText == 'success') {
      alert('Email sent');
      name.value = '';
      email.value = '';
      number.value = '';
      subject.value = '';
      message.value = '';
      human.value = '';
    } else {
      alert('Something went wrong!');
    }
  };

  xhr.send(JSON.stringify(formData));
}

提交 function

export default function contactApp() {
  contactForm.addEventListener('submit', e => {
    e.preventDefault();

    if (!checkInputs()) {
      alert('Please fix errors to submit.');
      return;
    } else {
      sendMessage();
    }
  });
}

Answer 1

问题出在您的 checkInputs() function 中，function 没有返回任何内容，但您正在检查条件下的验证状态

    if (!checkInputs()) { //to achieve this goal function must return either true or false
          alert('Please fix errors to submit.');
          return;
        } else {
          sendMessage();
        }

代码的更正版本如下，只需在您的 checkInputs() function 的末尾添加 return 语句，以告知相关输入中的任何一个都不正常。

    function checkInputs() {
  let flag = true;
  const nameValue = name.value.trim();
  const emailValue = email.value.trim();
  const numberValue = number.value.trim();
  const subjectValue = subject.value.trim();
  const messageValue = message.value.trim();
  const humanValue = human.value.trim();

  if (nameValue === '') {
    setErrorForName(name, 'Name cannot be blank');
    flag = false;
  } else {
    setSuccessForName(name);
  }

  if (emailValue === '') {
    setErrorForEmail(email, 'Email cannot be blank');
    flag = false;
  } else if (!isEmail(emailValue)) {
    setErrorForEmail(email, 'Not a valid email');
    flag = false;
  } else {
    setSuccessForEmail(email);
  }

  if (numberValue === '') {
    setErrorForNumber(number, 'Number cannot be blank');
    flag = false;
  } else {
    setSuccessForNumber(number);
  }

  if (subjectValue === '') {
    setErrorForSubject(subject, 'Subject cannot be blank');
    flag = false;
  } else {
    setSuccessForSubject(subject);
  }

  if (messageValue === '') {
    setErrorForMessage(message, 'Message cannot be blank');
    flag = false;
  } else {
    setSuccessForMessage(message);
  }

  if (humanValue !== '4') {
    setErrorForHuman(human, 'Please answer the question above');
    flag = false;
  } else {
    setSuccessForHuman(human);
  }
  
  return flag;
}