Question

我做了一个小表格，我希望它在输入留空时将信息发回给用户。

出于某种原因，它说请使用发布请求，所以我添加了它，现在它给了我一个不同的错误消息。

<div id="main">
<form name="myForm" method="post">
    <label><span>First Name:</span><input type="text" class="firstname" name="fname"></label><br/>
    <label><span>Last Name:</span><input type="text" class="lastname"></label><br>
    <label><span>E-Mail:</span><input type="text" class="email"></label><br/>
    <label><span>Phone:</span><input type="text" class="phone"></label><br/>
    <input type="submit" name="submit">
</form>
<div id="answer"></div>
</div>

使用Javascript：

$(document).ready(function(){
    $('input:submit').click(function(){
       $firstname = $('.firstname').val();
       $lastname = $('.lastname').val();
       $email = $('.email').val();
       $phone = $('.phone').val();

       if($firstname === "" && $lastname==="" && $email ==="" && $phone === ""){
           $("#answer").html("Please fill out all fields.");
       }

   });
});

任何人都知道问题可能是什么以及如何解决问题？

Answer 1

当您单击“提交”时，表单实际上会发布到您的django后端。如果要在发布到服务器之前进行前端验证，请阻止实际发布提交按钮。

$('input:submit').click(function(event){
       event.preventDefault();
       $firstname = $('.firstname').val();

Answer 2

你的小提琴你没有包括jquery库。如果您不想向服务器提交任何内容，请使用简单按钮<input type="button" value="submit">替换提交按钮。您的示例已更新：fiddle

P.S。您可能希望在验证中使用OR而不是AND来验证是否有任何字段为空

错误：使用表单和Javascript“请使用POST请求”

2 个答案: