异步 html5 验证答案

【问题标题】：async html5 validation异步 html5 验证
【发布时间】：2013-03-17 23:18:09
【问题描述】：

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

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

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

当未选中复选框时，一切都按预期工作，但是当它被选中时，消息是不可见的。

谁能解释一下应该怎么做？

【问题讨论】：

你的目标不是很明确。我已经稍微调整了你的代码，但我确定你的意思是别的。您能否更详细地说明您要检查的内容以及验证功能的作用？ jsfiddle.net/E4mPG/14
当使用超时时，我们应该看到html5弹出消息，但它没有显示。

标签： javascript html validation

【解决方案1】：

我想通了，原来 HTML5 验证消息只会在表单提交过程中弹出。

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

提交表单
设置forceValidation 标志
设置超时功能
调用超时函数时，重新提交表单
如果设置了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 上运行。

【讨论】：