Async HTML5 Validierung

Question

Aus irgendeinem Grund wird HTML5 Validierung Nachricht nicht angezeigt, wenn ich eine asynchrone Anfrage verwende.

Hier sehen Sie ein Beispiel.

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

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

Wenn Checkbox nicht aktiviert ist, funktioniert alles wie erwartet, aber wenn es aktiviert ist, wird die Nachricht nicht sichtbar.

Kann jemand erklären, was zu tun ist?

Answer 1

Ich fand heraus, stellt sich heraus, dass die HTML5 Validierungsnachrichten nur auftauchen, wenn ein Formular übermittelt wird. Hier

ist der Prozess hinter meiner Lösung (wenn Timeout aktiviert ist):

1. das Formular abschickt
2. Setzt die forceValidation Flagge
3. Setzt die Timeout-Funktion
4. Wenn die Timeout-Funktion aufgerufen wird , senden Sie das Formular erneut
5. Wenn das Flag forceValidation festgelegt ist, zeigen Sie die Bestätigungsmeldung

Führen Sie grundsätzlich zwei Submits durch, wobei das erste durch die Schaltfläche ausgelöst wird und das zweite ausgelöst wird, wenn die Timeout-Funktion aufgerufen wird.

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()); 
}; 

ich auf Chrome-Version 25.0.1364.172 m leite.