Chrome不显示jQuery或直接CSS属性设置的类

所以…,答案是没有一个JS代码会启动,因为Chrome正在实现HTML5输入元素,包括表单验证。因此,除非您正确填写字段,否则

在HTML5中 required the spec ,浏览器应启动 invalid 问题域上的事件。如果需要,可以在该点取消默认的阻塞行为。但是,您的脚本在您尝试的地方再次崩溃 attr('required') . 它会回来的 true 或 false 在Chrome中,使用HTML5,而不是像 email 如你所料。

所以,如果你想让它工作,你需要加上这两部分:

$(":input").bind("invalid", function(e){
   e.preventDefault(); // Don't block the form submit
});

然后从

var a = $(this).attr('required');

成为

var a = $(this).attr('required') ? $(this).attr('type') : "";

并根据需要更改switch语句

:您也可以采用一种非常酷的方法(也称为特征检测),然后改为:

把电流包起来 validate:

if(typeof $('<input />')[0].checkValidity === "undefined") {
  ... existing code ..
} else {
  $(':input').bind('invalid', function(){
     $(this).addClass('error');
  }).blur(function(){
     // If valid, turn off error
     // If invalid, turn on error
     $(this).toggleClass('error', !this.checkValidity());
  });
}

Here is a demo 第二个版本将在Chrome中工作,可能是Opera的当前/测试版。

你的CSS文件是 设置“背景色”。正在设置“*背景色”。如果IE黑客攻击,这可能是某种类型的,但是您需要设置“真实”样式属性(“背景色”,没有星号)。