4

小さなフォームを作成しました。入力が空白のままになっているときに、ユーザーに情報を投稿したいと思います。

何らかの理由で投稿リクエストを使用してくださいと表示されたので、それを追加したところ、別のエラー メッセージが表示されました。

コードは次のとおりです。 http://jsfiddle.net/pwtnY/

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

   });
});

問題が何であり、どうすれば解決できるか知っている人はいますか?

4

2 に答える 2

3

送信をクリックすると、フォームは実際に django バックエンドに送信されます。サーバーに投稿する前にフロントエンドの検証を行いたい場合は、送信ボタンが実際に投稿されないようにします。

$('input:submit').click(function(event){
       event.preventDefault();
       $firstname = $('.firstname').val();
于 2013-03-04T22:06:18.373 に答える
0

あなたのフィドルにはjqueryライブラリが含まれていません。サーバーに何も送信したくない場合は、送信ボタンを単純なボタンに置​​き換えます<input type="button" value="submit">。あなたの例が更新されています：フィドル

PSおそらく、フィールドのいずれかが空であるかどうかを検証するために、検証で AND の代わりに OR を使用することをお勧めします

于 2013-03-04T22:16:15.433 に答える