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

Question

这似乎有点像设计/CSS 问题，但我确实需要一些帮助。

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

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

它的工作原理是指它应用了一个 .error 类，将边框设置为 1px solid #f00，这是一个红色边框。由于某种原因，在 chrome 中你无论如何都不能改变它!

有人有什么想法吗？

Answer 1

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

在 HTML5 中，required 属性是一个 bool 值，它可以是 true 或 false。根据the spec ，浏览器应该在问题字段上触发一个 invalid 事件。如果需要，您可以在此时取消默认的阻止行为。但是，您的脚本在您尝试 attr('required') 的地方再次崩溃。它会在 Chrome 中使用 HTML5 返回 true 或 false，而不是您期望的 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 的当前/测试版。