使用 jquery 覆盖所需输入的边框答案

【问题标题】：Overriding the border for required inputs with jquery使用 jquery 覆盖所需输入的边框
【发布时间】：2021-04-22 16:35:19
【问题描述】：

当浏览器检测到该字段为空时，我只想覆盖浏览器在必填字段上使用的边框或轮廓颜色。我尝试为input:required:invalid {...} 提供不同的边框颜色，但css 似乎在页面加载时立即应用。

因此，我创建了一个 .invalid 类，我想将它添加到任何通过 jquery 触发“无效”事件的输入中。我只是不知道如何让它工作。这是我目前所拥有的：

（input.bind 抛出 Uncaught TypeError（input.bind 不是函数）但不知道该放什么......）

 let inputs = $('input, select');
 inputs.each(function (input) {
     input.bind("invalid", function () {
        input.addClass("invalid");
     });

     input.bind("input", function () {
        if (input.validity.valid) {
           input.removeClass('invalid');
        }
     });
 });

【问题讨论】：

浏览器默认不应用任何:invalid 样式。如果一些被应用到你的input 元素，那么它必须被你的代码应用在某个地方。关于bind()，已弃用，应改为on()
罗里，感谢您的回复。我真的很茫然，因为当我检查页面时找不到任何这样的样式，所以不知道是什么原因造成的。因此我假设浏览器。当我使用 .on （“input.on 不是函数”）时，我也会得到相同的 Uncaught TypeError
其实我相信这只是Firefox的默认样式
“input.on 不是函数”错误是因为您使用了 each() 处理程序的第一个参数 - 那是索引。元素引用是第二个参数，因此将其更改为function(i, input) {...。话虽如此，循环根本没有必要。您可以直接将事件处理程序绑定到 $('input, select') 选择器，jQuery 将为您将其应用于所有选定的元素
太棒了，这很有道理。我试试看！

标签： jquery validation

【解决方案1】：

input 周围的红色边框仅在它们处于无效状态时添加，并且仅在 Firefox 中。要删除它，您可以将以下 CSS 应用于元素：

input:invalid {
  box-shadow: none;
}

关于您的 jQuery 代码，each() 处理函数的第一个参数是集合中当前元素的 index，而不是对元素本身的引用。因此代码应该是：

inputs.each(function(i, input) {

话虽如此，each() 循环本身是多余的，因为当您调用相关方法时，jQuery 会将事件处理程序应用于集合中的所有元素。代码可以简化为：

$('input, select').on({
  invalid: e => $(e.target).addClass('invalid'),
  input: e => $(e.target).toggleClass('invalid', e.target.validity.valid)
});

【讨论】：

这就是诀窍！谢谢罗里。还有另一个令人讨厌的事件，它没有捕获，那就是当输入字段被聚焦/访问但然后在没有提供输入的情况下点击离开。关于该事件在 JS 中的任何线索？
你可以使用blur事件来检查值是否为空