11

非同期リクエストを使用しているときに、何らかの理由でhtml5検証メッセージが表示されません。

ここに例があります。

http://jsfiddle.net/E4mPG/10/

setTimeout(function() {                
  ...
  //this is not working
  target.setCustomValidity('failed!');                
  ...
}, 1000);

チェックボックスがオフの場合、すべてが期待どおりに機能しますが、チェックボックスがオンの場合、メッセージは表示されません。

誰かが何をすべきか説明できますか？

4

1 に答える 1

5

HTML5検証メッセージは、フォームの送信が進行中の場合にのみポップアップ表示されることがわかりました。

これが私のソリューションの背後にあるプロセスです（タイムアウトがチェックされている場合）：

  1. フォームを送信します
  2. forceValidationフラグを設定します
  3. タイムアウト機能を設定します
  4. タイムアウト関数が呼び出されたら、フォームを再送信します
  5. forceValidationフラグが設定されている場合は、検証メッセージを表示します

基本的に2つの送信を実行します。最初の送信はボタンによってトリガーされ、2番目の送信はタイムアウト関数が呼び出されたときにトリガーされます。

jsFiddle

var lbl = $("#lbl");
var target = $("#id")[0];

var forceValidation = false;

$("form").submit(function(){
    return false;
});

$("button").click(function (){                
    var useTimeout = $("#chx").is(":checked");         

    lbl.text("processing...");
    lbl.removeClass("failed");
    target.setCustomValidity('');    
    showValidity();     

    if (forceValidation) {
        forceValidation = false;
        lbl.text("invalid!");
        lbl.addClass("failed");
        target.setCustomValidity('failed!');
        showValidity();
    } else if (useTimeout) {
        setTimeout(function () {
            forceValidation = true;
            $("button").click();
        }, 1000);
    } else {
        lbl.text("invalid without timeout!");
        lbl.addClass("failed");
        target.setCustomValidity('failed!');
        showValidity();            
    }
});

function showValidity() {                    
    $("#lbl2").text(target.checkValidity());
};

Chromeバージョン25.0.1364.172mで実行しています。

于 2013-03-22T13:01:01.320 に答える