Question

我正在尝试验证表单，如果表单中的字段为空白，则会附加一条错误消息，我将在下面附加代码

<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>");
                }
            }

现在，每当我单击该按钮时，它都会显示该消息，但是在窗体正文之后，它也会在其中粘贴整个HTML页面代码，知道为什么会发生这种情况吗？

预先感谢

Answer 1

那是因为您将submit值用作按钮的type属性。您需要使用

onclick="return validate()"

以应用客户端的验证部分。

此外，您无需使用append方法，因为每次您单击DOM按钮时，该方法都会附加一个SEND结构。通过传递 HTML 内容作为参数，使用.html()方法。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="return validate()">SEND</button>
</form>

Answer 2

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

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

Answer 3

您缺少添加javascript lib文件的功能，您可以在浏览器控制台中看到它实时提供错误 ReferenceError：未定义$ 。。请将jquery添加到文件顶部，然后尝试。

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

3 个答案: