正确验证后未发送联系表
Contact form is not send after correct validation
我使用 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 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));
}
提交功能
export default function contactApp() {
contactForm.addEventListener('submit', e => {
e.preventDefault();
if (!checkInputs()) {
alert('Please fix errors to submit.');
return;
} else {
sendMessage();
}
});
}
问题出在您的 checkInputs() 函数中,该函数没有 returning 任何东西,但您正在检查 condition
中的验证状态
if (!checkInputs()) { //to achieve this goal function must return either true or false
alert('Please fix errors to submit.');
return;
} else {
sendMessage();
}
代码的更正版本如下,只需在您的 checkInputs() 函数末尾添加 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;
}
我使用 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 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));
}
提交功能
export default function contactApp() {
contactForm.addEventListener('submit', e => {
e.preventDefault();
if (!checkInputs()) {
alert('Please fix errors to submit.');
return;
} else {
sendMessage();
}
});
}
问题出在您的 checkInputs() 函数中,该函数没有 returning 任何东西,但您正在检查 condition
中的验证状态 if (!checkInputs()) { //to achieve this goal function must return either true or false
alert('Please fix errors to submit.');
return;
} else {
sendMessage();
}
代码的更正版本如下,只需在您的 checkInputs() 函数末尾添加 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;
}