Chrome不显示由jQuery或Direct CSS属性设置的类

Question

这可能看起来像一个设计/ CSS问题,但我真的需要一些帮助.

这是http://library.permilia.com/Gavin/version2.0_beta/lead.html页面

它适用于除chrome之外的所有可以想象的浏览器.

通过它工作我的意思是它应用一个类.error将边框设置为1px solid#f00这是一个红色边框.因为某种原因,无论如何都无法改变它!

有人有任何想法吗？

Answer 1

所以...,答案是你的JS代码都没有被触发,因为Chrome正在实现HTML5输入元素,包括表单验证.因此,除非您正确填写字段,否则验证码永远不会触发!

在HTML5中,required属性是布尔值,它是true或false.根据规范,浏览器应该invalid在问题字段上触发事件.如果需要,可以取消此时的默认阻止行为.但是,您尝试的脚本会再次出现故障attr('required').它将使用HTML5 返回true或false在Chrome中返回,而不是像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());
  });
}

这是第二个版本的演示,可以在Chrome中使用,也可能是Opera的当前/测试版.