覆盖css为html5表单验证/所需的弹出窗口 [英] override css for html5 form validation/required popup

问题描述

如何覆盖HTML5表单上必填字段的默认弹出式窗口？

示例： http://jsfiddle.net/uKZGp/ （make确保您点击提交按钮查看弹出式窗口）

HTML

 < form> 
< input type =textname =nameid =nameplaceholder =Name *required =required/> 
< input type =submit/> 
< / form> 
  

注意：您必须使用Google Chrome或FireFox等HTML5浏览器查看。

这个链接不能解决我的问题，但它可能会让人在盒子外面思考：

• http://www.the-art-of-web.com/html/ html5-form-validation /


• http://adhockery.blogspot.com/2011/03/styling-with-html5-form-validation.html

这是浏览器的一部分。这是一个非常简单的方法。我想要更改的唯一属性是使用此示例的错误消息：

  document.getElementById（name）。 setCustomValidity（Lorum Ipsum）; 
  

但是，如下例所示： http://jsfiddle.net/trixta/qTV3g/ ，您可以通过使用jQuery覆盖面板样式。这不是一个插件，它是一个核心功能，使用一个称为 Webshims 的DOM库，当然还有一些CSS

我发现这个 c>

我认为这是最好的解决方案您可以找到并且只有覆盖基本（丑陋）错误面板的方法。

回答。

How can I override the default popup for a required field on a HTML5 form?

Example: http://jsfiddle.net/uKZGp/ (make sure you click the submit button to see the popup)

The HTML

<form>
<input type="text" name="name" id="name" placeholder="Name*" required="required" />
<input type="submit" />
</form>

NOTE: You must view this with a HTML5 browser like Google Chrome or FireFox.

This link doesn't solve my question but it might make someone think outside of the box:

• http://www.the-art-of-web.com/html/html5-form-validation/
• http://adhockery.blogspot.com/2011/03/styling-with-html5-form-validation.html

解决方案

It's impossible to change the validation style with only HTML5/CSS3.

It's part of the browser. The only attribute I figured out to change is the error message by using this example:

 document.getElementById("name").setCustomValidity("Lorum Ipsum");

But, as shown in this example : http://jsfiddle.net/trixta/qTV3g/, you can override the panel style by using jQuery. This is not a plugin, it's a core functionality, uses a DOM lib called Webshims and, of course, some CSS to style the popups.

I found that very useful example in this bug post titled Improve form validation error panel UI.

I think this is the best solution you can find and only way to override the basic (ugly) error panel.

Regards.

这篇关于覆盖css为html5表单验证/所需的弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！