如何显示类似于 `required="true"` 的消息

Question

单击提交按钮时，以下代码将在空文本字段旁边显示一个小消息气球。

<form>
    <input type="text" id="name" required="true">
    <button type="submit">Submit</button>
</form>

（上面的小提琴）

我怎样才能触发这样一个气球的显示javascript？我还可以控制它的消息内容和显示位置吗？jQuery答案也都OK。

Answer 1

当您具有必需属性时，您看到的默认消息是浏览器的本机行为，消息文本、位置和样式将根据您使用的浏览器而变化。

Chrome 和 FireFox 会说：“请填写此表单” IE 会说：“这是必填字段”

所以如果你想有一个自定义消息，你可以使用这个 JS：

document.getElementById('name').setCustomValidity('Your custom validation message comes here');

这是更新的小提琴： https: //jsfiddle.net/cvr687mL/1/

这里是一个使用 jquery 触发验证的 jquery 脚本：

$('input').blur(function(event) {
    event.target.checkValidity();
}).on('invalid', function(event) {
    setTimeout(function() { $(event.target).focus();}, 50);
});