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

Question

I have a following code for the form validation:

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

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

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

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

I tried to set the same messages for all .validating elements, but I had a following error in the console: "Cannot read property 'call' of undefined. Exception occurred when checking element , check the 'rules' method". How to fix that? Thank you in advance. The full code is here: https://jsfiddle.net/d2pge08f/1/

Answer 1

I solved my problem in the following way:

$('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: "Введите цифры"
                },
            });
        });

Here is an example: https://jsfiddle.net/waLgfv6m/

Answer 2

According to the documentation https://jqueryvalidation.org/rules/ the add function in

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

will add rules for AN element, in your case only to the first maybe. Hence they use id in the documentation...

the first version of your code should do it:

$('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>