JavaScript中验证后表单提交的确认消息

我大约两周前开始学习javascript，所以我是个新手。我把表格弄得乱七八糟，弄不懂什么东西

我用HTML制作了一个表单，并想用Javascript验证它

到目前为止我所做的：

如果字段为空，并且用户按submit键，则字段周围将出现红色边框。如果用户在字段中写入内容，则边框将消失

我想做的是：

如果没有验证错误并且表单已提交，我希望在表单上方显示确认消息。消息最初应该隐藏起来，应该说：“感谢您联系我们，（以及用户在表单中输入的名字）”

我还想在提交后打印控制台中输入字段中的所有信息

我如何仅使用vanilla Javascript实现这一点

函数formValidation（）{
如果（document.myForm.fname.value==“”）{
document.getElementById（“名字”）.style.border=“2px实心红色”；
返回false；
}否则{
document.getElementById（“名字”）.style.border=“”；
};
如果（document.myForm.lname.value==“”）{
document.getElementById（“姓氏”）.style.border=“2px实心红色”；
返回false；
}否则{
document.getElementById（“姓氏”）.style.border=“”；
};
var checkMale=document.getElementById（“gender-m”）.checked；
var checkFemale=document.getElementById（“gender-f”）.checked；
if（checkMale==false&&checkFemale==false）{
警告（“请选择性别”）；
返回false；
};
如果（document.myForm.texta.value==“”）{
document.getElementById（“area”）.style.border=“2px实心红色”；
返回false；
}否则{
document.getElementById（“区域”）.style.border=“”；
};
返回true；
}

我的表格
感谢您联系我们，




性别：

男性

女性



提交

您可以这样做：

函数formValidation（）{
如果（document.myForm.fname.value==“”）{
document.getElementById（“名字”）.style.border=“2px实心红色”；
返回false；
}否则{
document.getElementById（“名字”）.style.border=“”；
};
如果（document.myForm.lname.value==“”）{
document.getElementById（“姓氏”）.style.border=“2px实心红色”；
返回false；
}否则{
document.getElementById（“姓氏”）.style.border=“”；
};
var checkMale=document.getElementById（“gender-m”）.checked；
var checkFemale=document.getElementById（“gender-f”）.checked；
if（checkMale==false&&checkFemale==false）{
警告（“请选择性别”）；
返回false；
};
如果（document.myForm.texta.value==“”）{
document.getElementById（“area”）.style.border=“2px实心红色”；
返回false；
}否则{
document.getElementById（“区域”）.style.border=“”；
};
var成功=真；
如果（成功）{
var data=document.getElementById（“名字”）.value+，“+document.getElementById（“姓氏”）.value；
控制台日志（数据）；
var html=''；
html+=“感谢您联系我们，”+document.getElementById（“名字”）.value；
document.getElementById（“msg”）.innerHTML=html；
}
}

我的表格




性别：

男性

女性



提交

检查更新的答案，并删除您刚刚发布的答案。可以在评论部分询问。请阅读更多关于如何提出有用问题的指导