Javascript append（）在单击按钮时打印完整的页面代码

我试图验证一个表单并附加一条错误消息。如果表单中的字段留空，我会附加下面的代码

<form id="contact-form">
  <div id="errorArea"></div>
  <div class="row">
    <div class="col-md-6">
       <input type="text" name="name" id="name" placeholder="Your Name*">
    </div>
    <div class="col-md-6">
       <input type="text" name="email" id="email" placeholder="Mail*">
    </div>
  </div>
    <input type="text" name="subject" id="subject" placeholder="Subject*">
    <textarea name="message" id="message" cols="30" rows="10" placeholder="Type Your Message......."></textarea>
    <button type="submit" class="default-btn submit-btn bg-leaf" onclick="validate()">SEND</button>

发送

我在单击下面的按钮时调用validate（）函数

function validate() {
                var name = $('#name').val();
                var email = $('#email').val();
                var subject = $('#subject').val();
                var message = $('#message').val();

                if(name == "" || email == "" || subject == "" || message == "") {
                    $("#errorArea").append("<p class='text-danger'>You need to fill all fields before sending an email</p>");
                }
            }

函数验证（）{
var name=$（'#name'）.val（）；
var email=$（'#email'）.val（）；
var subject=$（'#subject'）.val（）；
var message=$（'#message'）.val（）；
如果（姓名=“”| |电子邮件=“”| |主题=“”| |消息=“”）{
$（“#errorArea”）.append（
您需要在发送电子邮件之前填写所有字段
”；
}
}

现在每当我点击按钮，它都会显示消息，但是在表单主体之后，它也会将整个HTML页面代码粘贴到那里，你知道为什么会发生这种情况吗

---

提前感谢

这是因为您正在将

submit

值用作按钮的

type

属性。你需要使用

onclick="return validate()"

以应用客户的验证部分

另外，您不需要使用

append

方法，因为每次单击

SEND

按钮时，它都会追加一个

DOM

结构。使用

.html（）

方法，将html内容作为参数传递

函数验证（）{
var name=$（'#name'）.val（）；
var email=$（'#email'）.val（）；
var subject=$（'#subject'）.val（）；
var message=$（'#message'）.val（）；
如果（姓名=“”| |电子邮件=“”| |主题=“”| |消息=“”）{
$（“#errorArea”）.html（“
您需要在发送电子邮件之前填写所有字段”
”；
返回false；
}
}

发送

一种更简单的不允许空字段的方法是在每个输入中添加属性required，如下所示：

<input type="text" name="name" id="name" placeholder="Your Name*" required>
<input type="text" name="email" id="email" placeholder="Mail*" required>

您缺少添加javascript库文件，您可以在浏览器控制台中看到它发出错误liveReferenceError:$未定义。请将jquery添加到文件顶部，然后重试

你能公布完整的结果吗？HTML代码段是否在完整块的上方？如果验证失败，我看不到任何东西阻止表单提交。页面只是重新加载吗？或者您可以看到错误消息吗？正确的（imho）方法是使用

submit

按钮，只截获

submit

事件，这样表单也可以在没有JavaScript的情况下工作。您如何知道它们没有包含jQuery？