javascript - 如何显示像 `required="true 所示的消息”`

标签 javascript jquery html validation

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

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

( fiddle for above )

如何在 javascript 中触发显示这样的气球?我是否也可以控制它的消息内容和它的显示位置? jQuery 答案也可以。

最佳答案

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

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

所以如果你想要自定义消息,你可以使用这个 JS:

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

这是更新后的 fiddle : https://jsfiddle.net/cvr687mL/1/

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

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

关于javascript - 如何显示像 `required="true 所示的消息”`,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29807539/

相关文章:

javascript - 单击省略号时展开和缩小

Javascript Closure 和 WebRTC 回调问题

javascript - 如果原始表单对于屏幕阅读器而言过于复杂,那么提供后备表单对于 WCAG 合规性是否有效?

html - 使一段文字不间断?

html - Chrome 不显示特殊字符,而其他浏览器显示

javascript - fullpage.js - 向上滚动时允许正常向上滚动

javascript - PHP - 轻松从 JSON 制作表格。

javascript - 使用AJAX和PHP永久存储评论

javascript - jQuery 选择器添加一个字符串,但选择得到未定义的值

jquery - jQuery 1.3.2 到 1.4.2 的重大更改