jQuery 即使名称正确，验证自定义验证程序也未触发

Question

我有以下代码：

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 }
    }
  });
});

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

我在 Whosebug 上阅读了几个类似的问题和答案（例如 this），但其中 none 似乎有效。事实上，恰恰相反。他们中的大多数建议 jQuery 验证器通过查找具有指定 name 而不是指定 id 的输入字段来工作。也就是说，(*) 处的对象属性名称必须与要验证的输入的 name 属性相匹配。但是，正如您在我的代码中看到的那样，我 do 在我的输入中有 test_txb 名称（以及 id），但由于某种原因，我的验证器方法从未得到使用上面的代码调用。

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

这是怎么回事，有人可以解释一下吗？最简单的解决方案当然是只添加前面提到的 class 名称，但我讨厌在我的代码中乱扔不必要的东西，尤其是当我不完全理解为什么要这样做的时候。

编辑： jQuery 验证器版本为 1.15.1

编辑 2： 我也有 ASP.NET MVC Unobtrusive lib 引用，也许这与某些东西冲突？

Answer 1

是否添加了验证插件jquery？

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

因为当我在 codepen 中 copied/paste 时，我对你的解决方案没有任何问题。

编辑：我认为您应该为验证器return设置一个值

编辑 2：关于您的编辑，我在 google 上搜索并发现了一些看起来很有趣的内容，link 亲爱的：

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

Answer 2

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

html

<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
      }
    }
  });

});

Fiddle

Answer 3

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

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

所以这里 post 的任何答案都表明他们可以让它工作的原因是他们自己初始化了验证器。可能我得到了这种奇怪的行为，因为 ASP.NET 不显眼的库默默地初始化了验证器，因此即使我将我的规则传递给 validate 方法，也没有添加任何东西，我取回了预配置的验证器对象（呃，自动化的缺点...)。

我终于通过使用 post-初始化规则添加使其工作，如下所示：

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

jQuery 即使名称正确，验证自定义验证程序也未触发

jQuery validation custom validator not fired even though name is correct

javascript

jquery

jquery-validate

unobtrusive-validation