Как правильно сделать проверку input?

Question

[Егор Лавренов]

Имеется вот такая html структура

<!-- Year -->
<div class="year filter-character-slider">
  <span class="sidebar-filter__desc">Год ввода в эксплуатацию</span>
  <!-- Slider-input -->
  <div class="slider-input">
    <input data-range-val="1980,2018" maxlength="4" minlength="1" value="1980" class="check-input slider-input__text slider-input__text--min">
    <input data-range-val="1980,2018" maxlength="4" minlength="1" value="2018" class="check-input slider-input__text slider-input__text--max">
  </div><!--./ End of Slider-input -->

  <div data-min="1980" data-max="2018" class="slider-range"></div>

</div><!--./ End of Year -->

<!-- Hours -->
<div class="hours filter-character-slider">
  <span class="sidebar-filter__desc">Налет часов</span>
  <!-- Slider-input -->
  <div class="slider-input">
    <input data-range-val="0,1000" maxlength="4" minlength="1" value="0" class="check-input slider-input__text slider-input__text--min">
    <input data-range-val="0,1000" maxlength="4" minlength="1" value="1000" class="check-input slider-input__text slider-input__text--max">
  </div><!--./ End of Slider-input -->

  <div data-min="0" data-max="1000" class="slider-range"></div>

</div><!--./ End of Hours -->

Выглядит все это вот так


Имеется javascript код

function checkInput(input) {
  var maximun = input.closest('.filter-character-slider').find('.slider-range').attr('data-max');
  var minimum = input.closest('.filter-character-slider').find('.slider-range').attr('data-min');

  if ( (input.val() > maximun) || (input.val() < minimum) ) {
    if (input.hasClass('slider-input__text--max')) {
      input.val(maximun);
    }
    if (input.hasClass('slider-input__text--min')) {
      input.val(minimum);
    }
  }
}

$('.check-input').focusout(function(event) {
  checkInput($(this));
});

Я получаю максимальное и минимальные возможные значения для инпута, исходя из ренж-слайдера,
(data-max и data-min атрибуты).
Делаю проверку, соответствует ли введенное юзером значение моему диапазону, и если нет, то заменяю на максимальное, либо минимальное значение.
Проблема в том, что в первом случае, где год, все работает отлично, но этот же код во втором случае не работает, исправляет значение даже при верном диапазоне.

Comments

[alex-1917]

я в твои картинки не вникал, ибо код привычнее (чо код зажал-то?), но навскидку судя по описанию болезни))) ты второй слайдер неправильно подключил, надо независимо подключать, а у тебя получается что при вводе во второй слайдер проверка происходит по первому, а на этот момент в первом слайдере уже однозначно условие на диапазон выполняется, уяснил?

Answer 1

[0xD34F]

Как вы думаете - значения каких типов возвращают методы val и attr? Ну, не получается ли так, что вы сравниваете вовсе не числа, а строки? Знаете как строки сравниваются?

UPD. Есть и ещё косяк, не столь явный. Раз числа в input'ах задают интервал, то они не могут быть произвольными - первое не должно быть больше второго. Надо бы этот момент учитывать - получать оба числа, проверять, как одно соотносится с другим, при необходимости менять их местами. Как-то так (да, к чёрту focusout, зачем что-то делать, если не было изменений?):

$('.check-input').change(function() {
  const $wrapper = $(this).closest('.filter-character-slider');
  const $slider = $wrapper.find('.slider-range');
  const $inputs = $wrapper.find('.check-input');
  const values = $inputs.get().map(n => $(n).val() | 0);

  if (values[0] > values[1]) {
    values.reverse();
  }
  values[0] = Math.max($slider.attr('data-min'), values[0]);
  values[1] = Math.min($slider.attr('data-max'), values[1]);

  $inputs.val(i => values[i]);
  // здесь ещё должна быть установка значений для слайдера,
  // но, поскольку вы не сказали, что за плагин используется,
  // то это уже вам виднее, как тут действовать
});

Comments

[Егор Лавренов]

Да, кажется в этом было все дело. Я был невнимателен, благодарю за помощь.

Вот решение