jQuery 永远不会调用验证方法

Question

我知道我最近一直在询问 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; 上设置了一个断点，它永远不会被命中）。为什么是这样？如何确保调用验证函数？

Answer 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 和大量在线示例。

jQuery 永远不会调用验证方法

jQuery validation method is never being called

javascript

jquery

jquery-validate