由于某种原因,当我使用异步请求时,未显示 html5 验证消息。
在这里你可以看到一个例子。
setTimeout(function() {
...
//this is not working
target.setCustomValidity('failed!');
...
}, 1000);
当未选中复选框时,一切都会按预期进行, 但是当它被选中时,该消息是不可见的。
有人可以解释一下应该做什么吗?
我发现了,事实证明 HTML5 验证消息只会在表单提交正在进行时弹出。
这是我的解决方案背后的过程(检查超时时):
forceValidation
标志forceValidation
标志,则显示验证消息基本上执行两次提交,第一次由按钮触发,第二次在调用超时函数时触发。
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 上运行。
HTMLInputElement.reportValidity
,在第一次回答这个问题时并不存在,也适用于这个用例。
function showValidity() {
$("#lbl2").text(target.checkValidity());
target.reportValidity();
};