Сравнение значений поля ввода в каждом блоке

347

20 января 2017, 06:23

Здравствуйте! Есть форма с несколькими блоками в которых, в свою очередь присутствуют по два инпута from и to. Есть скрипт, который сверяет введенные в них значения и выбивает ошибку, если значение первого инпута превышает значение второго (и наоборот). Но он работает только для одного блока, сделать его таким образом, чтобы он работал во всех подобных блоках формы у меня не выходит. Ниже два сниппета - первый со скриптом, который работает на одном блоке и второй - мой вариант скрипта для всех блоков, но он не работает. Ссылка на песочницу.

Сниппет первый:

$(document).ready(function(){ 
  $("#price-range-from").on("change", function(){ 
    if(parseInt($(this).val()) > parseInt($("#price-range-to").val())) { 
      $('.filter-item .error').addClass('visible').text("First value can't be larger then second"); 
      $(this).addClass('error-field').val(''); 
    } 
    else { 
      $('.filter-item .error').removeClass('visible'); 
      $(this).removeClass('error-field'); 
    } 
  }); 
  $("#price-range-to").on("change", function(){ 
    if(parseInt($(this).val()) < parseInt($("#price-range-from").val())) { 
      $('.filter-item .error').addClass('visible').text("Second value can't be smaller then first"); 
      $(this).addClass('error-field').val(''); 
    } 
    else { 
      $('.filter-item .error').removeClass('visible'); 
      $(this).removeClass('error-field'); 
    } 
  }); 
});

.from-to-form label { 
    font-weight: normal; 
    margin-right: 10px; 
} 
.from-to-form label:last-of-type { 
    margin-left: 10px; 
} 
.from-to-form input[type="number"] { 
    width: 83px; 
    height: 24px; 
    border-radius: 4px; 
    box-shadow: none; 
 
    border: 2px solid #aaa; 
    font-size: 14px; 
    text-align: center; 
    color: #333; 
    -webkit-transition: all .2s; 
    -moz-transition: all .2s; 
    -ms-transition: all .2s; 
    -o-transition: all .2s; 
    transition: all .2s; 
} 
.from-to-form input[type="number"]:hover { 
    border: 2px solid #ffe69a; 
} 
.from-to-form input[type="number"]:focus { 
    border: 2px solid #ffe69a; 
    background-color: #fef5d3; 
    outline: none; 
} 
.from-to-form input[type="number"]::-webkit-outer-spin-button, 
.from-to-form input[type="number"]::-webkit-inner-spin-button { 
    /* display: none; <- Crashes Chrome on hover */ 
    -webkit-appearance: none; 
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ 
} 
 
 
.filter-item .error { 
    display: none; 
    color: #d66464; 
} 
.filter-item .error.visible { 
    display: block; 
} 
.filter-item .filter-body .error-field { 
    border-color: #d66464; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="price-range" class="filter-item half-width right"> 
  <div class="filter-item-header"> 
    <h3 class="filter-title">Price range of in-app purchases <span>($)</span></h3> 
  </div> 
  <div class="filter-body"> 
    <div class="from-to-form"> 
      <label for="price-range-from">From</label> 
      <input id="price-range-from" class="from" type="number" placeholder="15"> 
 
      <label for="price-range-to">To</label> 
      <input id="price-range-to" class="to" type="number" placeholder="232"> 
 
      <span class="error"></span> 
    </div> 
  </div> 
</div> 
 
 
<div id="number-of-downloads" class="filter-item half-width left"> 
  <div class="filter-item-header"> 
    <h3 class="filter-title">Number of downloads</h3> 
  </div> 
  <div class="filter-body"> 
    <div class="from-to-form"> 
      <label for="downloads-from">From</label> 
      <input id="downloads-from" class="from" type="number" placeholder="0"> 
 
      <label for="downloads-to">To</label> 
      <input id="downloads-to" class="to" type="number" placeholder="45454335"> 
    </div> 
  </div> 
</div>

Сниппет второй:

$(document).ready(function() { 
  $('.filter-item .from').each(function () { 
    $(this).on('change', function () { 
      if (parseInt($(this).val()) > parseInt($(this).closest('.to').val())) { 
        $(this).closest('.filter-item .error').addClass('visible').text("First value can't be larger then second"); 
        $(this).addClass('error-field').val(''); 
      } else { 
        $(this).closest('.filter-item .error').removeClass('visible'); 
        $(this).removeClass('error-field'); 
      } 
    }) 
  }) 
 
  $('.filter-item .to').each(function () { 
    $(this).on('change', function () { 
      if (parseInt($(this).val()) > parseInt($(this).closest('.from').val())) { 
        $(this).closest('.filter-item .error').addClass('visible').text("First value can't be larger then second") 
        $(this).addClass('error-field').val(''); 
      } else { 
        $(this).closest('.filter-item .error').removeClass('visible'); 
        $(this).removeClass('error-field'); 
      } 
    }) 
  }) 
});

.from-to-form label { 
    font-weight: normal; 
    margin-right: 10px; 
} 
.from-to-form label:last-of-type { 
    margin-left: 10px; 
} 
.from-to-form input[type="number"] { 
    width: 83px; 
    height: 24px; 
    border-radius: 4px; 
    box-shadow: none; 
 
    border: 2px solid #aaa; 
    font-size: 14px; 
    text-align: center; 
    color: #333; 
    -webkit-transition: all .2s; 
    -moz-transition: all .2s; 
    -ms-transition: all .2s; 
    -o-transition: all .2s; 
    transition: all .2s; 
} 
.from-to-form input[type="number"]:hover { 
    border: 2px solid #ffe69a; 
} 
.from-to-form input[type="number"]:focus { 
    border: 2px solid #ffe69a; 
    background-color: #fef5d3; 
    outline: none; 
} 
.from-to-form input[type="number"]::-webkit-outer-spin-button, 
.from-to-form input[type="number"]::-webkit-inner-spin-button { 
    /* display: none; <- Crashes Chrome on hover */ 
    -webkit-appearance: none; 
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ 
} 
 
 
.filter-item .error { 
    display: none; 
    color: #d66464; 
} 
.filter-item .error.visible { 
    display: block; 
} 
.filter-item .filter-body .error-field { 
    border-color: #d66464; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="price-range" class="filter-item half-width right"> 
  <div class="filter-item-header"> 
    <h3 class="filter-title">Price range of in-app purchases <span>($)</span></h3> 
  </div> 
  <div class="filter-body"> 
    <div class="from-to-form"> 
      <label for="price-range-from">From</label> 
      <input id="price-range-from" class="from" type="number" placeholder="15"> 
 
      <label for="price-range-to">To</label> 
      <input id="price-range-to" class="to" type="number" placeholder="232"> 
 
      <span class="error"></span> 
    </div> 
  </div> 
</div> 
 
 
<div id="number-of-downloads" class="filter-item half-width left"> 
  <div class="filter-item-header"> 
    <h3 class="filter-title">Number of downloads</h3> 
  </div> 
  <div class="filter-body"> 
    <div class="from-to-form"> 
      <label for="downloads-from">From</label> 
      <input id="downloads-from" class="from" type="number" placeholder="0"> 
 
      <label for="downloads-to">To</label> 
      <input id="downloads-to" class="to" type="number" placeholder="45454335"> 
    </div> 
  </div> 
</div>

Подскажите пожалуйста, что я делаю не так?

Answer 1

Вы задаёте функцию только для одной формы с полями. Вам нужно задать общую функцию сравнения и применить ко всем полям по id или как я в своём варианте сделал - по классу:

function comparison(e, first, second) { 
  if (parseInt(second) > parseInt(first)) { 
    $(e).parents('.filter-item').find('.error').addClass('visible').text("First value can't be larger then second"); 
    $(e).addClass('error-field').val(''); 
  } else { 
    $(e).parents('.filter-item').find('.error').removeClass('visible'); 
    $(e).removeClass('error-field'); 
  } 
}; 
 
$(document).ready(function() { 
  $(".from").on("change", function() { 
    comparison(this, $(this).parents('.filter-item').find(".to").val(), $(this).val()); 
  }); 
  $(".to").on("change", function() { 
    comparison(this, $(this).val(), $(this).parents('.filter-item').find(".from").val()) 
  }); 
});

.from-to-form label { 
  font-weight: normal; 
  margin-right: 10px; 
} 
.from-to-form label:last-of-type { 
  margin-left: 10px; 
} 
.from-to-form input[type="number"] { 
  width: 83px; 
  height: 24px; 
  border-radius: 4px; 
  box-shadow: none; 
  border: 2px solid #aaa; 
  font-size: 14px; 
  text-align: center; 
  color: #333; 
  -webkit-transition: all .2s; 
  -moz-transition: all .2s; 
  -ms-transition: all .2s; 
  -o-transition: all .2s; 
  transition: all .2s; 
} 
.from-to-form input[type="number"]:hover { 
  border: 2px solid #ffe69a; 
} 
.from-to-form input[type="number"]:focus { 
  border: 2px solid #ffe69a; 
  background-color: #fef5d3; 
  outline: none; 
} 
.from-to-form input[type="number"]::-webkit-outer-spin-button, 
.from-to-form input[type="number"]::-webkit-inner-spin-button { 
  /* display: none; <- Crashes Chrome on hover */ 
  -webkit-appearance: none; 
  margin: 0; 
  /* <-- Apparently some margin are still there even though it's hidden */ 
} 
.filter-item .error { 
  display: none; 
  color: #d66464; 
} 
.filter-item .error.visible { 
  display: block; 
} 
.filter-item .filter-body .error-field { 
  border-color: #d66464; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="price-range" class="filter-item half-width right"> 
  <div class="filter-item-header"> 
    <h3 class="filter-title">Price range of in-app purchases <span>($)</span></h3> 
  </div> 
  <div class="filter-body"> 
    <div class="from-to-form"> 
      <label for="price-range-from">From</label> 
      <input id="price-range-from" class="from" type="number" placeholder="15"> 
 
      <label for="price-range-to">To</label> 
      <input id="price-range-to" class="to" type="number" placeholder="232"> 
 
      <span class="error"></span> 
    </div> 
  </div> 
</div> 
 
 
<div id="number-of-downloads" class="filter-item half-width left"> 
  <div class="filter-item-header"> 
    <h3 class="filter-title">Number of downloads</h3> 
  </div> 
  <div class="filter-body"> 
    <div class="from-to-form"> 
      <label for="downloads-from">From</label> 
      <input id="downloads-from" class="from" type="number" placeholder="0"> 
 
      <label for="downloads-to">To</label> 
      <input id="downloads-to" class="to" type="number" placeholder="45454335"> 
       
      <span class="error"></span> 
    </div> 
  </div> 
</div>

first в функции всегда должно быть меньше second. По этому указываете в функции сначала this, потом поле, которое должно быть меньше и потом уже поле, которое должно быть больше.

Создание интернет-магазина электроники в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Нижняя рамка активных элементов

Здравствуйте, у меня при наведении на элемент в Google Chrome должна появляться рамка 3px, но сначала появляется однопиксельная, и потом достраивается...

308

HTML

Нажатие на кнопку с помощью тачпада

Есть кнопка на форме, есть два селектора: button и button:activeПри нажатии мышью на кнопке — стиль из селектора button:active применяется, но если нажать...

323

HTML

Округление значения поля с шагом в 0.5

Здравствуйте! Есть числовое поле с установленным минимальным и максимальным значениями и шагом в 05

321

DataGridView+ сторонний контрол

Подскажите, пожалуйста, возможно ли увязать сторонний контролл с DatagridView? В частности, RatingControl от DevExpressПример ниже:

276