jQuery验证自定义验证器不会被触发，即使名称是正确的

jQuery validation custom validator not fired even though name is correct

本文关键字：验证 自定义 jQuery      更新时间：2023-09-26

我有以下代码:

HTML:

<form id="myTestFrom">
  <input type="text" name="test_txb" id="test_txb" value="" class="form-control" />
</form>

JS: 

$(function () {
  $.validator.addMethod('testValidationMethod', function (value, element) {
    alert('FIRED');
  }, 'test error message');
  $('#myTestFrom').validate({
    rules: {
      /* (*) */
      test_txb: { testValidationMethod: true }
    }
  });
});

问题很简单:我的自定义验证器方法从未被调用。

我在StackOverflow上读过几个类似的问题和答案(例如这个)，但它们似乎都不起作用。事实上，恰恰相反。他们中的大多数人认为jQuery验证器的工作方式是查找具有指定的名称的输入字段，而不是指定的id。也就是说，(*)处的对象属性名称必须与要验证的输入的name属性匹配。然而，正如您在我的代码中看到的那样，我确实在我的输入上有test_txb名称(以及id)，但是由于某种原因，我的验证器方法从未使用上面的代码调用。

但是，如果我将验证器方法的名称(testValidationMethod)作为类添加到我的输入字段，那么它确实会被调用。这听起来与我在SO上读到的任何内容都是矛盾的，因为所有这些答案都表明，默认行为是验证器在设置自定义验证规则时检查元素的name属性。

这是怎么回事，有人能解释一下吗?最简单的解决方案当然是添加前面提到的类名，但是我讨厌在我的代码中添加不必要的东西，特别是当我不完全理解为什么我应该这样做的时候。

编辑: jQuery验证器版本为1.15.1

编辑2:我还有ASP。. NET MVC不显眼的库引用，也许是冲突的东西?

在查看了验证器插件的源代码后，我发现问题是由以下几行引起的:

// Check if a validator for this form was already created
var validator = $.data( this[ 0 ], "validator" );
if ( validator ) {
    return validator;
}

所以，这里张贴的任何答案都说他们可以让它工作的原因是他们自己初始化了验证器。可能我有这种奇怪的行为是因为ASP。. NET低调库静默初始化验证器，因此即使我将规则传递到validate方法中，也没有添加任何内容，并且我得到了预配置的验证器对象(呃，自动化的缺点…)。

我终于得到了它的工作通过使用后初始化规则加法，像这样:

$('#test_txb').rules('add', {
  testValidationMethod: true
});

可能是您忘记了包含验证或jQuery的js这是你的工作代码

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/additional-methods.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form id="myTestFrom">
      <input type="text" name="test_txb" id="test_txb" value="" class="form-control" />
</form>

JavaSript 

$(document).ready(function(){
  $.validator.addMethod('testValidationMethod', function(value, element) {
    console.log('FIRED');
  }, 'test error message');
  $('#myTestFrom').validate({
    rules: {
      test_txb: {
        required: true,
        testValidationMethod: true
      }
    }
  });
});

小提琴

是否添加了jquery验证插件?

https://cdnjs.com/libraries/jquery-validate

因为我对你的解决方案没有问题，当我复制/粘贴到codepen。

编辑:我认为你应该有一个验证器的返回值

编辑2:关于你的编辑，我在谷歌上搜索了一下，发现了一些似乎有趣的东西，链接爱:

https://www.tigraine.at/2011/08/26/jquery-validate-and-microsofts-unobtrusive-validation-dont-play-well-together

相关文章：