asynchronizacja html5

Question

Z jakiegoś powodu wiadomość sprawdzania poprawności html5 nie jest wyświetlana, gdy używam żądania asynchronicznego.

Tutaj możesz zobaczyć przykład.

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

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

Gdy pole wyboru nie jest zaznaczone, wszystko działa zgodnie z oczekiwaniami, ale gdy jest zaznaczone, wiadomość nie jest widoczny.

Czy ktoś może wyjaśnić, co należy zrobić?

Answer 1

Wyliczyłem, że wiadomości sprawdzania poprawności HTML5 zostaną wyskakujące tylko w trakcie przesyłania formularza.

Oto proces za moim roztworu (gdy jest zaznaczone timeout):

1. przesyła formularz
2. ustawia flagę forceValidation
3. Ustawia funkcję timeout
4. Gdy funkcja limitu czasu nazywa , prześlij ponownie formularz
5. Jeśli ustawiono flagę forceValidation, wyświetl komunikat sprawdzania poprawności

Zasadniczo wykonaj dwa polecenia, pierwszy zostanie wywołany przez przycisk, a drugi zostanie wywołany po wywołaniu funkcji limitu czasu.

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

używam Chrome wersja 25.0.1364.172 m.