JQuery更改在浏览器之间的行为不一致

JQuery change behaving inconsistently across browsers

本文关键字：不一致 之间 浏览器 JQuery      更新时间：2024-06-05

我是JavaScript的新手，我继承的一些JQuery.validate代码有点问题。如果答案显而易见，请原谅我：）

我有以下验证方法声明：

jQuery.validator.addMethod("myMethod", function(value, element, param) {
    /*...*/
    if (document.getElementById("DOMID") {
        /*...*/
    }
    /*...*/
)};

本质上，该方法是检查某个DOM对象的存在，如果它确实存在，它会设置一些不同的验证参数。我要验证的对象是一组封装在父<div id="DOMID">中的<select>输入，但有几个不同的"DOMID"情况，每个情况的验证规则略有不同，因此在方法内部进行检查。我想在每次其中一个更改其值时验证<select>。然后我有这个激活：

$(".myClass").validate({
    onchange: true,
});

将myClass应用于我想要验证的所有<select>输入。

最后，我有这个注册：

jQuery.validator.addClassRules(
{
   myClass:
     {
      myMethod: true,
     }
}

这在Chrome中运行得很好——每次更改<select>选项时都会应用验证。

然而，在Firefox中，情况并非如此——我发现我必须模糊选择才能激活验证。所以，这是一个问题：为什么Chrome和Firefox之间的变化表现不同或者不是这样，而且我的代码中还有其他东西导致了这种不一致？

我的第二个问题是关于我觉得很奇怪的事情。在试图解决Firefox直到模糊才进行验证的问题时，我将JavaScript getElementByID...改为使用jQuery，而不是：

if ($("#DOMID").length > 0) { [...]

（我也尝试过if ($("#DOMID").get(0))，但我认为它们做了同样的事情——不幸的是，它们都没有让Firefox正常运行）

奇怪的是，在我做出这个更改后，Chrome停止了对更改的验证，只会对模糊进行验证。这是我修改的唯一一行代码——从那以后，我把它切换回来了，Chrome再次正常运行。为什么会发生？当调用验证方法时，验证方法的内部会产生什么影响？

希望这个问题有意义——如果有任何其他信息会有帮助，请告诉我！此外，任何关于调试这个问题的智慧之言都将不胜感激。非常感谢你的建议！

您使用jQuery Validate插件不正确。。。

报价OP：

"每次其中一个更改其值时，我都要验证<select>。然后我激活它："

$(".myClass").validate({
    onchange: true,
});

1） 不能将.validate()附加到任何单个输入元素.validate()方法只能附加到<form>元素。。。

$('#myForm').validate({
    // options, rules, etc.
});

2） 没有这样的名为onchange的插件选项。您只能使用开发人员专门为此插件创建的选项。

如果要添加和删除基于select元素的规则，请使用.rules('add')和.rules('remove')方法。

$('#myselect').on('change', function() {
    $('#myInput').rules('add', {  // add rule(s) to #myInput
        required: true
    });
});

如果您想"验证"或测试某个东西的有效性，请使用.valid()方法。

$('#myselect').on('change', function() {
    $('#myInput').valid();  // trigger a test of #myInput
});
相关文章：