Как запретить вводить в инпут все кроме слова «нет» и цифр?

Question

[Павел]

сделал себе для инпута вот такую штуку

$(".hours").bind("keyup change", function (e) {
        var tval = $(this);
        if (tval.val() === "") {
            tval.prop('required', true);
        } else if (tval.val() >= 24) {
            tval.val("24");
            tval.addClass("inputError");
        } else {
            tval.removeClass("inputError");
            tval.prop('required', false);
        }
    });

jsfidle
теперь понадобилось добавить проверку чтоб кроме слова "нет" и цифр нельзя было нечего ввести , например
"12вв" уже нельзя
"вв" тоже нельзя

кто подскажет как реализовать?

Answer 1

[Sanovskiy]

Чтобы не городить неюзабельный интерфейс, я бы предложи\л ограничить инпут только цифрами, а для "нет" сделать отдельный чекбокс, который будет дизейблить поле инпута, если он checked

Comments

[Павел]

не мой вариант , так как этот инпут находится в таблице и таких инпутов 50+ штук , чекбоксом я нагружу страницу лишним мазолящим глаз местом + неястность для пользователя + увеличу высоту или ширину колонки в таблице

[Dmitry Bay]

Павел,
а писать 50 раз слово нет - не надоест?
Проще кнопку добавить - "у меня нет", при клике делать неактивным инпут и заполнять его словом нет.

Да впрочем и провеку на нет проблем нет добавить.

if (!($.isNumeric(tval.val() ) || tval.val() == 'нет'  ) ) {
// обрабатываем ошибку, и не забываем значение к единому регистру приводить.
}

[Sanovskiy]

Лучше один клик по чекбоксу, чем клик по полю и нажатие трех клавиш на клавиатуре.

[Павел]

Sanovskiy, ну к чему эти споры? Слово "нет" ставится автоматически путем череды логических действий пользователя , а цифру он ставит сам если слова "нет" нет

а вот если пользователь промахнется и введет помимо цифр еще и букву то цифры на сервере не обработаются , слово "нет" ловится и с ним уже другая логика происходит

[Sanovskiy]

Павел, вот вам еще проще вариант: если при потере фокуса в поле пусто - автоматом ставим туда "нет". При получении фокуса полем если в нем "нет" - чистим поле.

[Павел]

Sanovskiy, может и проще , но человек может случайно потерять фокус и среди десятков "нет" придется искать то место где нужно таки ввести данные

[Sanovskiy]

Павел, тогда разрешите вводить все, что угодно, и при потере фокуса вырезайте все нецифровые символы, кроме случая, когда в поле стоит "нет"
Еще как вариант при вводе символа проверять число ли это, если это не число, а буква "н", и поле пустое - вписывать "нет" сразу же

А с третьей стороны if (!($.isNumeric(tval.val() ) || tval.val() == 'нет' ) ) вполне себе рабочий вариант

[Павел]

Dmitry Bay, сделал вот так

$(".hours").bind("keyup change", function (e) {
        var tval = $(this);
        if (!($.isNumeric(tval.val()) || tval.val() == 'нет')) {
            tval.addClass("inputError");
        } else {
            if (tval.val() === "") {
                tval.prop('required', true);
            } else if (tval.val() >= 24) {
                tval.val("24");
                tval.addClass("inputError");
            } else {
                tval.removeClass("inputError");
                tval.prop('required', false);
            }
        }
    });

спасибо

[Dmitry Bay]

Павел, у вас событие keyup, точно так работает?

[Павел]

Dmitry Bay, это уже валидный внедренный код

[Sanovskiy]

Павел,

$(".hours").bind("keyup change", function (e) {
    const tval = $(this);
    if ((!$.isNumeric(tval.val()) && tval.val().toLowerCase() !== 'нет') || parseInt(tval.val()) >= 24) {
        tval.addClass("inputError");
        return;
    }
    if (tval.val() === "") {
        tval.prop('required', true);
        return;
    }
    tval.removeClass("inputError");
    tval.prop('required', false);
});

Чуток оптимизировал код