web-dev-qa-db-ja.com

Ajax送信前のHTML5検証

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

形：

<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 protected]" />
  <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");
        }
    });
});
jqueryajaxhtml5formsvalidation
33
Sorry-Im-a-N00b

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

$('#submit').click(function(){
    if($("form")[0].checkValidity()) {
        //your form execution code
    }else console.log("invalid form");
});
49
antinescience

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

JQueryセレクターを複数回使用する場合は、jQueryセレクターを変数にキャッシュして、要素にアクセスするたびにDOMをナビゲートする必要がないようにすることをお勧めします。 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");
        }
    });
});
43
csbarnes

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

4
Musa

JQueryの送信ハンドラを使用することをお勧めします。次のメソッドを使用してフォームへの応答を取得できます。

jQuery('#contactForm').on('submit', function (e) {
    if (document.getElementById("contactForm").checkValidity()) {
        e.preventDefault();
        jQuery.ajax({
            url: '/some/url',
            method: 'POST',
            data: jQuery('#contactForm').serialize(),
            success: function (response) {
                //do stuff with response
            }
        })
    }
    return true;
});
1
Mfoo

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

これにより、新しい文字の挿入と表示ごとに入力を確認できます。検証が真になるまで「無効」。

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

0
Kurt