38

これは単純なはずですが、私は夢中になっています。ajaxで送信するhtml5フォームがあります。無効な値を入力すると、そのことを知らせるポップアップ応答が表示されます。ajax 送信を実行する前に、エントリが有効であることを確認するにはどうすればよいですか?

形：

<form id="contactForm" onsubmit="return false;">
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" required placeholder="Name" />
  <label for="subject">Subject:</label>
  <input type="text" name="subject" id="subject" required placeholder="Subject" />
  <label for="email">Email:</label>
  <input type="email" name="email" id="email" required placeholder="email@example.com" />
  <label for="message">Message:</label>
  <textarea name="message" id="message" required></textarea>
  <input type="submit" id="submit"/>
</form>

参加する：

$('#submit').click(function(){
    var name = $("input#name").val();
    var subject = $("input#subject").val();
    var email = $("input#email").val();
    var message = $("input#message").val();

    var dataString = 'email=' + email + '&message=' + message + '&subject=' + subject + '&name=' + name ; 

    $.ajax({
        url: "scripts/mail.php",
        type:   'POST',
        data: dataString,
        success: function(msg){
            disablePopupContact();
            $("#popupMessageSent").css("visibility", "visible");
        },
        error: function() {
            alert("Bad submit");
        }
    });
});
4

6 に答える 6

59

クリックの代わりに送信イベントにバインドすると、HTML5 検証に合格した場合にのみ発生します。

要素にアクセスするたびに DOM をナビゲートする必要がないように、jQuery セレクターを複数回使用する場合は変数にキャッシュすることをお勧めします。jQuery は、フォーム データの解析を処理する .serialize() 関数も提供します。

var $contactForm = $('#contactForm');

$contactForm.on('submit', function(ev){
    ev.preventDefault();

    $.ajax({
        url: "scripts/mail.php",
        type:   'POST',
        data: $contactForm.serialize(),
        success: function(msg){
            disablePopupContact();
            $("#popupMessageSent").css("visibility", "visible");
        },
        error: function() {
            alert("Bad submit");
        }
    });
});
于 2013-11-13T22:30:54.967 に答える
55

デフォルトでは、jQuery は HTML5 検証について何も知らないので、次のようにする必要があります。

$('#submit').click(function(){
    if($("form")[0].checkValidity()) {
        //your form execution code
    }else console.log("invalid form");
});
于 2013-03-30T00:35:00.553 に答える
4

HTML5 フォーム検証を使用している場合は、フォームの送信ハンドラーで ajax リクエストを送信する必要があります。送信ハンドラーは、フォームが検証された場合にのみトリガーされます。使用しているのは、フォームの検証とは関連付けられていないため、常にトリガーされるボタン クリック ハンドラーです。注: すべてのブラウザーが html5 フォーム検証をサポートしているわけではありません。

于 2013-03-30T01:24:28.257 に答える
0

あなたが何を意味するのか正確にはわかりません。しかし、入力が有効かどうかをリアルタイムで確認したいと思います。その場合、.click イベントの代わりに .keyup を使用する必要があります。これは、ユーザーが送信を押した場合にアクションが発生するためです。http://api.jquery.com/keyup/を見てください。

これにより、新しい文字が挿入されるたびに入力をチェックし、検証が真になるまで「無効」などを表示できます。

これがあなたの質問に答えることを願っています！

于 2013-03-30T00:38:13.647 に答える
-2

また、jquery validate メソッドを使用して、次のようなフォームを検証することもできます

$("#form id").validate();

フォームの検証に基づいてブール値を返します。また、errorList メソッドを使用してログにエラーを表示できます。

上記の機能を使用するには、スクリプトに jquery.validate.js ファイルを含める必要があります

于 2013-04-06T10:54:37.523 に答える