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

问题很简单：我的自定义验证器方法永远不会被调用。

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

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

那么这里发生了什么，有人可以解释一下吗？最简单的解决方案肯定是只添加上面提到的类名，但我讨厌乱丢我的代码，否则不必要的东西，特别是如果我不完全理解为什么我应该这样做的原因。

编辑： jQuery验证器版本为1.15.1

编辑2：我还引用了ASP.NET MVC Unobtrusive lib，也许这与某些内容有关？

Answer 1

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

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

Answer 2

您是否使用jquery添加了用于验证的插件？

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

因为当我将其复制/粘贴到codepen中时，我对您的解决方案没有任何问题。

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

编辑2：关于你的编辑，我在google上搜索并发现了一些看似有趣的内容，链接belove：

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

Answer 3

您可能忘记包含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

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

3 个答案: