Валидация JQuery-UI Spinner в форме

Question

Я использую "плагин проверки jQuery" для проверки полей формы. Это работает очень хорошо.

Я добавил новое поле в форму. В этом поле используется jQuery-UI Spinner, но мне не удалось его проверить.

Это HTML-код элемента счетчика:

<form id="formAddCategory">
    <input id="spinTeamNumber" name="value" style="display: inline-block; margin: 10px; width: 3em;" size="3" maxlength="3">
</form>

Это код счетчика:

$("#spinTeamNumber").spinner({
    step : 1,
    min : 1,
    numberFormat : "n",
    alignment : 'vertical'
});

Это проверочный код:

$("#formAddCategory").validate({
    rules : {
        "spinTeamNumber" : {
            required : true,
        }
    },
    messages : {
        "spinTeamNumber" : {
            required : "* Required"
        }
    }
});

[...]

if ($("#formAddCategory").valid()) {
    ...
}

Но это не работает. Я также попытался определить собственный метод проверки, но безуспешно.

Answer 1

Вы можете использовать только nameне id, элемента ввода в пределах .validate() метод.

Ваш name определяется как value...

<input id="spinTeamNumber" name="value" ....

Так что вы должны использовать value в пределах .validate() метод...

$("#formAddCategory").validate({
    rules : {
        value : {  // <-- the input NAME
            required : true,
        }
    },
    messages : {
        value : {  // <-- the input NAME
            required : "* Required"
        }
    }
});

Чтобы создать спиннер, пользовательский интерфейс jQuery динамически добавляет контейнер вокруг исходного элемента ввода, поэтому вы, вероятно, захотите использовать errorPlacement возможность получить сообщение для отображения на улице.

ДЕМО: http://jsfiddle.net/6u18p6ju/