永远不会调用 jQuery 验证方法答案

【问题标题】：jQuery validation method is never being called永远不会调用 jQuery 验证方法
【发布时间】：2020-02-20 19:47:34
【问题描述】：

我知道我最近一直在询问有关 jQuery 验证的问题，但我认为我现在的问题归结为最基本的问题。

如果我有这个 HTML 页面：

<html>
<head>
    <title>validation test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.js"></script>
</head>
<body>
    <form id="theform">
        <div id="num" name="num">86</div>
    </form>
    <script type="text/javascript">     
        var validationObject = {
            rules: {
                num: {
                  numtest:true
                }
            }
        };

        $.validator.addMethod("numtest", function(value, element) {
            return value == 42;
         });

        $('form').validate(validationObject);
        if ($("form").valid())
            alert("VALID");
        else
            alert ("INVALID");
    </script>
</body>
</html>

然后我希望警报是"INVALID"，因为num 是86 而不是42。但我得到的是"VALID"；我定义的用于验证的函数没有被调用（我在return value == 42; 上设置了一个断点，它永远不会被命中）。为什么是这样？如何确保调用验证函数？

【问题讨论】：

我不熟悉该插件，但您正在尝试对不是表单元素的 div 执行验证
是的，我正在编写的实际代码，这是一个有点奇怪的情况，我想验证一堆下拉列表是否加起来就是 div 中的值。所以这就是我验证 div 的原因。但即使我将其更改为文本字段，它仍然无法正常工作...
不可能。更改为 input type='text' 修复它：jsfiddle.net/c38uxh6m

标签： javascript jquery jquery-validate

【解决方案1】：

您在自定义方法中缺少验证错误消息。您还应该使用this.optional(element)，这样您就可以将该字段留空并单独使用required 规则。 （按照您的书写方式，该字段也是必填项。）
```
$.validator.addMethod("numtest", function(value, element) {
    return this.optional(element) || (value == 46);
}, "validation error message");
```
将整个内容放在ready 处理程序中，以确保在调用.validate() 方法之前表单存在。 （但是，这并不是破坏表单的原因，因为 JavaScript 是在 HTML 之后调用的。）
此插件无法识别div，因为它不是有效的表单输入元素。将其更改为 <input />、<select> 或 <textarea> 元素。
```
<input type="text" id="num" name="num" />
```

第 3 项是唯一会破坏您的代码的东西。

工作演示：jsfiddle.net/c38uxh6m/

请仔细查看SO Wiki page 和大量在线示例。

【讨论】：