Как исправить ошибку "Не удается прочитать свойство 'вызов' из неопределенного. Возникла исключительная ситуация при проверке элемента, проверьте метод" rules ""?

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, но у меня возникла следующая ошибка в консоли: «Не удается прочитать свойство 'вызов' из неопределенного. Исключительная ситуация при проверке элемента, проверьте метод 'rules'" , Как это исправить? Заранее спасибо. Полный код здесь: https://jsfiddle.net/d2pge08f/1/

Answer 1

Я решил свою проблему следующим образом:

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

Answer 2

Согласно документации 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>