如何修复错误 "Cannot read property 'call' of undefined. Exception occurred when checking element , check the 'rules' method"？

Question

我有以下表单验证代码：

         $('form').validate({
             errorElement: "div",

             errorPlacement: function(error, element) {
                 $('.error-messages').append(error);
             },

             submitHandler: function() {
                 console.log("Таблица успешно обновлена!")
             }
        });

        $('.validating').rules('add', {
            rules: {
                number: true
            },
            messages: {
                number: "Введите цифры"
            },
        });

我试图为所有 .validating 元素设置相同的消息，但我在控制台中出现以下错误："Cannot read property 'call' of undefined. Exception occurred when checking element , check the 'rules' method"。如何解决？先感谢您。完整代码在这里：https://jsfiddle.net/d2pge08f/1/

Answer 1

根据文档 https://jqueryvalidation.org/rules/

中的添加函数

$('.validating').rules('add', {
    number: true,
    messages: {
        number: "Введите цифры"
    },
});

将为 AN 元素添加规则，在您的情况下可能只添加到第一个元素。因此他们在文档中使用 id...

您的代码的第一个版本应该可以做到：

$('form').validate({
     rules: {
        price_from: {
            number: true
        },
        price_to: {
            number: true
        }
    },
    messages: {
        price_from: {
            number: "Введите цифры"
        },
        price_to: {
            number: "Введите цифры"
        }
    },

    errorElement: "div",

    errorPlacement: function(error, element) {
        $('.error-messages').append(error);
    },

    submitHandler: function() {
        this.successList.map(function(field){
              console.log($(field).attr("name"), $(field).val())
          })
        console.log("Таблица успешно обновлена!")
    }
});

.wrapper {
    width: 50%;
    margin: 0 auto;
}

.price-filter {
    text-align: center;
    margin-bottom: 10px;
    height: auto;
}
    form {
        width: 100%;
    }

    .price-filter input {
        border: 1px solid #000000;
        outline: none;
    }
    
.error-messages {
     color: red;
     margin-top: 5px;
}

input.error {
    border: 2px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>

<div class="price-filter wrapper">
            <form action="/" name="form">
                <label>Цена от:</label>
                <input class="price-from validating" name="price_from" type="text" placeholder="0">
                <label>до:</label>
                <input class="price-to validating" name="price_to" type="text" placeholder="10000">
                <input class="refresh" type="submit" value="Обновить">
                <div class="error-messages"></div>
            </form>
        </div>

Answer 2

我通过以下方式解决了我的问题：

$('form').validate({
             errorElement: "div",

             errorPlacement: function(error, element) {
                 $('.error-messages').append(error);
             },

             submitHandler: function() {
                console.log("Таблица успешно обновлена!")
            }
        });

        $('.validating').each(function() {
            $(this).rules('add', {
                number: true,
                messages: {
                    number: "Введите цифры"
                },
            });
        });

这里有一个例子：https://jsfiddle.net/waLgfv6m/

如何修复错误 "Cannot read property 'call' of undefined. Exception occurred when checking element , check the 'rules' method"？

How to fix the error "Cannot read property 'call' of undefined. Exception occurred when checking element , check the 'rules' method"?

javascript

jquery

jquery-validate