Javascript html表单未正确执行

当用户填写表单的所有字段并单击submit时，我想显示一个警报对话框，但当我调用javascript函数时，HTML表单无法正常工作。这意味着即使我将所有输入字段留空，我也可以提交表单，并在浏览器上显示警告框。Plz帮助

form.html

 <form>
  <br>
  <input type="name"  id="name" size="40" placeholder="Name" class="form-control" required><br>
   <br>
<input type="email" id="email" size="40" placeholder="your email here...." class="form-control" required><br>
   <br>
<input type="text" id="comment" size="50" placeholder="Comment..." class="form-control" required><br><br>

  <input type="submit" onclick="abc()" value="send me" class="btn custom-btn">Send me</button>
 </form>

寄给我

JS函数

 <script>
function abc() {
message = "<ul><li><b>Name: </b>" + document.name.value;
message += "<li><b>Email: </b>" + document.email.value;
message += "<li><b>Comment: </b>" + document.Comment.value + "</ul>";
alert('Sent Successfully..!   We will contact you shortly.'); 
}
</script>

函数abc（）{
message=“
名称：”+document.Name.value；
message+=“
电子邮件：”+document.Email.value；
消息+=”
注释：“+document.Comment.value+”
”；
警报（'已成功发送..！我们将很快与您联系'）；
}

当所有表单验证都通过时，您可以简单地使用JQuery来监听表单上的

提交

事件。然后，在submit函数中，您可以通过每个表单元素的

id

获取它们的值

$（'#formId'）。提交（函数abc（）{
message=“
名称：”+$（'#Name'）.val（）；
message+=”
电子邮件：“+$（'#Email'）.val（）；
消息+=”
注释：“+$（“#注释”）.val（）+”
”；
警报（'已成功发送..！我们将很快与您联系。'+消息）；
});














寄给我
您必须使用
document.getElementById
获取值并在表单提交上执行
abc（）
，如下所示：


功能abc（自身）{
var name=document.getElementById（'name'）。值；
var email=document.getElementById（'email'）。值；
var comment=document.getElementById（'comment'）。值；
var message=“
”；
message=“
名称：“+Name+”
”；
邮件+=“
电子邮件：“+Email+”
”；
消息+=“
注释：“+Comment+”
”；
消息+=“
”；
self.innerHTML=消息；
返回false；
}










您不需要编写文档



函数abc（）{
message=“
Name:”+Name.value；
message+=“
电子邮件：”+Email.value；
消息+=“
注释：“+Comment.value+”
”；
警报（'已成功发送..！我们将很快与您联系'）；
}















寄给我
我的问题解决了，我使用了这个脚本

 <script>
function abc() {
    var name=document.getElementById('name').value;
    var email=document.getElementById('email').value;
    var comment=document.getElementById('comment').value;

   if(name=="" || email=="" || comment=="")
   {
    alert("Please fill all fields");
   }
   else
   {
    alert("name : "+name+"\nemail :"+email+"\ncomment :"+comment);
   }
}

function ValidateEmail(mail) 
 {
     var email=document.getElementById('email').value;

     if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email))
 {
return (true)
 }
alert("You have entered an invalid email address!")
return (false)
}
</script>


函数abc（）{
var name=document.getElementById（'name'）。值；
var email=document.getElementById（'email'）。值；
var comment=document.getElementById（'comment'）。值；
如果（姓名=“”| |电子邮件=“”| |评论=“”）
{
警告（“请填写所有字段”）；
}
其他的
{
警报（“名称：“+name+”\n邮件：“+email+”\n注释：“+comment”）；
}
}
函数ValidateEmail（邮件）
{
var email=document.getElementById（'email'）。值；
如果（/^\w+（[\.-]？\w+）*@\w+（[\.-]？\w+*（\.\w{2,3}）+$/.test（电子邮件））
{
返回（真）
}
警报（“您输入的电子邮件地址无效！”）
返回（假）
}

html















寄给我
您尝试将
onclick=“abc（）”
更改为
onsubmit=“abc（）”
？没有人提到jQuery，这无助于OP了解问题所在。我为您更新代码。不同之处是abc现在正在提交表单
 <form >
     <br>
     <input type="name"  id="name" size="40" placeholder="Name" class="form-control" required><br>
      <br>
      <input type="email" id="email" size="40" placeholder="your email here...." class="form-control" onblur="ValidateEmail(this)" required><br>
      <br>
     <input type="text" id="comment" size="50" placeholder="Comment..." class="form-control" required><br><br>
      <button type="submit"  value="send me"class="btn" onclick="abc();">Send me</button>
    </form>