如何覆盖HTML5表单上必填字段的默认弹出窗口?
示例:http://jsfiddle.net/uKZGp/(确保您单击提交按钮以查看弹出窗口)
HTML
<form> <input type="text" name="name" id="name" placeholder="Name*" required="required" /> <input type="submit" /> </form>
注意:您必须使用HTML5浏览器(例如Google Chrome或FireFox)查看此文件。
> http://www.the-art-of-web.com/html/html5-form-validation/
> http://adhockery.blogspot.com/2011/03/styling-with-html5-form-validation.html
解决方法
只有HTML5 / CSS3不可能改变验证风格。
它是浏览器的一部分。我想要改变的唯一属性是错误消息通过使用这个例子:
document.getElementById("name").setCustomValidity("Lorum Ipsum");
但是,如此示例所示:http://jsfiddle.net/trixta/qTV3g/,您可以通过使用jQuery覆盖面板样式。这不是一个插件,它是一个核心功能,使用一个DOM库名为Webshims,当然,一些CSS风格的弹出窗口。
我发现这个非常有用的例子在这个bug post题为改进表单验证错误面板UI。
我认为这是最好的解决方案,你可以找到,只有方式来覆盖基本(丑陋)错误面板。
问候。