Как обеспечить валидацию для спиннера на JavaScript

Оффтоп javascript
1

Проблема с валидацией спиннера

У меня есть таблица с несколькими колонками, одна из которых содержит чекбоксы. Когда отмечен чекбокс, появляется дополнительная колонка Количество #, где располагается спиннер для ввода числа. Пользователь может ввести значение вручную или использовать стрелочки для изменения числа. Стрелочки работают корректно - не позволяют выбирать меньше 1 и больше, чем количество для соответствующей строки.

Однако, если maksimalnoe количество составляет 80, и пользователь вводит 85, система это принимает. Я не хочу, чтобы это было возможным, так как нельзя заказать 85, если в наличии только 80.

Вопросы:

  • Как сделать так, чтобы спиннер не принимал значения больше заданного количества?
  • Как запретить ввод символов и разрешить исключительно цифры?

Пример HTML:

<section id="checkout-btn"> 
<button id="checkout" name="order" onclick="sendMail(); return false">Оформить заказ</button>
</section>

<br>

<table id="merchTable" cellspacing="5" class="sortable">
    <thead>
        <tr class="ui-widget-header">
            <th class="sorttable_nosort"></th>
            <th class="sorttable_nosort">Локация</th>
            <th class="merchRow">Код отчета</th>
            <th class="merchRow">SKU</th>
            <th class="merchRow">Специальный ID</th>
            <th class="merchRow">Описание</th>
            <th class="merchRow">Количество</th>
            <th class="sorttable_nosort">Ед.</th>
            <th style="display: none;" class="num">Количество #</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="ui-widget-content"><input type="checkbox" class="check" name="check" id="checkid-1"></td>
            <td class="loc ui-widget-content">Локация 1</td>
            <td class="rp-code ui-widget-content" align="center">Код 1</td>
            <td class="sku ui-widget-content">SKU 1</td>
            <td class="special-id ui-widget-content" align="center">ID 1</td>
            <td class="description ui-widget-content">Описание 1</td>
            <td class="quantity ui-widget-content" align="center">80</td>
            <td class="unit ui-widget-content">шт.</td>
            <td style="display: none;" class="quantity_num ui-widget-content"><input type="textbox" style="width: 100px;" class="spinner" id="spin-1"></td>
        </tr>
    </tbody>
</table>

JavaScript для спиннера:

$(function () {
    $(".check").change(function(){
        $(this).closest('tr').find('td.quantity_num').toggle(this.checked);
        var quantity = $(this).closest('tr').find('td.quantity').text();
        $(this).closest("tr").find(".spinner").spinner({
            spin: function( event, ui ) {
                if ( ui.value > quantity ) {
                    $( this ).spinner( "value", quantity );
                    return false;
                } else if ( ui.value <= 1 ) {
                    $( this ).spinner( "value", 1 );
                    return false;
                } 
            }
        });
    });
});
2

Проблема в том что spin срабатывает только при клике на стрелочки. При ручном вводе валидации нет. Добавь обработчик change для инпута:

$(this).closest("tr").find(".spinner").on('change', function() {
    var val = parseInt($(this).val());
    if (val > quantity || isNaN(val)) {
        $(this).val(quantity);
    } else if (val < 1) {
        $(this).val(1);
    }
});

Тогда валидация будет работать и при ручном вводе.

3

Почему не использовать min и max прямо в HTML? Браузер сам заблокирует неправильные значения. Добавь type="number" вместо textbox - буквы автоматически не пройдут. Только max нужно будет динамически ставить из значения количества при создании спиннера.