0

Имеется следующий код для валидации инпутов:

$('.refresh').click(function() {
            $('.price-filter').validate({
                rules: {
                    price: {
                        required: true,
                        number: true
                    }
                },

                messages: {
                    price: {
                        required: "Поля ввода не должны быть пустыми",
                        number: "Введите цифры"
                    }
                },

                errorElement: "div",

                errorPlacement: function(error, element) {
                    $('.error').insertAfter('.price-filter');
                },

                submitHandler: function() {
                    table.draw();
                }

            })
        });

На первый взгляд все настроено верно, однако сообщения об ошибках не выводятся. Как это исправить? Заранее спасибо.
Полный код находится здесь: https://jsfiddle.net/zu2yhmvx/

1 ответ 1

2

Самая главная ошибка в том, что валидируются формы, а не просто скелет из html. Потому что у представленного вами кода нет тега form и вы валидируете по клику содержимое дива.

я немного исправил ваш код для примера. И старайтесь не использовать одинаковые неймы на разных инпутах. Во-первых - плагин завалидирует только первый нашедшийся Во вторых - при отправке данных вы получите одно значение - в вашем случае price, хотя вы забираете 2 разных поля "цена от" и "цена до".

К тому же вам не стоит валидацию навешивать на клик по кнопке - в самом плагине уже есть обработчик сабмита и вы его указали, поэтому вы фактически делаете лишнее действие.

Валидация этим плагином должна выглядеть примерно вот так

$('form').validate({
rules: {
  price_from: {
    required: true,
    number: true
  },
  price_to: {
    required: true,
    number: true
  }
},
messages: {
  price_from: {
    required: "Поля ввода не должны быть пустыми",
    number: "Введите цифры"
  },
  price_to: {
    required: "Поля ввода не должны быть пустыми",
    number: "Введите цифры"
  }
},
submitHandler: function() {
  alert('ok');
}

})

https://jsfiddle.net/zu2yhmvx/ - было https://jsfiddle.net/wbh3em49/ - стало

2
  • Благодарю за ответ, помогло! 14 янв 2019 в 10:45
  • Тут есть кнопка, которая отмечает ответ как верный) Рад, что помог
    – Taarim
    14 янв 2019 в 11:00

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.