异步html5验证

Question

由于某些原因，当我使用异步请求时，未显示html5验证消息。

在这里你可以看到一个例子。

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

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

如果未选中复选框，则一切都按预期工作， 但检查时，邮件不可见。

有人可以解释应该做什么吗？

Answer 1

我明白了，事实证明只有在表单提交正在进行时才会弹出HTML5验证消息。

以下是我的解决方案背后的过程（检查超时时）：

1. 提交表格
2. 设置forceValidation标志
3. 设置超时功能
4. 调用超时功能时，请重新提交表单
5. 如果设置了forceValidation标志，则显示验证消息

基本上执行两个提交，第一个由按钮触发，第二个在调用超时函数时触发。

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.172 m。