Как переключать классы у input в зависимости от длины его значения?

Question

[RushV]

Как правильно проверить input на заполнение?
Если меньше 10 символов добавить класс 1, иначе добавить класс 2.

let tel = $("[type='tel']").change(function(){
        if(tel.length < 9 ){
            tel.addClass(1);
        }
        else{
            tel.addClass(2);
        }

Что-то не работает.

Comments

[v3shin]

tel.val().length?

Answer 1

[Владимир Мальцев]

$("[type='tel']").change(function(){
        if($(this).val().trim().length < 10 ){
            $(this).addClass('class_1');
        }
        else{
            $(this).addClass('class_2');
        }

Comments

[RushV]

Хотел спросить обязательно применять val и trim?

[Владимир Мальцев]

trim() гасит пробелы в начале и в конце строки " 123 " length = 5; trim(" 123 ") length = 3;
val() - если используете jQuery то используйте val()

[Владимир Мальцев]

Кстати, лучше проверять кол-во символов после ввода или в процессе, а не в момент выбора инпута

$(document).on('keyup blur',"[type='tel']",function(){
    telnumber = $(this).val().trim();
    if(

        telnumber.length == 10

     ){
        $(this).addClass('valid_tel');
    }else{
        $(this).addClass('invalid_tel');
    }
})

[RushV]

Владимир Мальцев, Интересные штуки есть блин, а можно к этому применить, если пользователь недобрал номер ну не 10, а там 4 ли 6 ?
А...во забрался)

[RushV]

А можно списать маску в этот код .mask("[phone]"); ?

[Владимир Мальцев]

RushV, вообще нужно не учитывать в каком формате пользователь ввел номер телефона, например разрешить вводить номер, 89621234567 или [phone] или [phone] ну т.е. дать волю выбора как пользователь привык, так пускай и вводит, а скрипт должен привести введенные данные в свой формат : 79621234567 (удаляем все символы кроме цифр, если первый символ 8, меняем его на 7, потом если первые 2 символа не 79 то это не мобильный, потом если общее количество символов равно 11 то все ок)

[RushV]

А вот как спасибо!
А так можно например ограничить ввод цифр 11 или 15?
Ввёл 15 и всё.

[RushV]

Спасибо большое за объяснения и за помощь!

Answer 2

[0xD34F]

Каким input'ам, по какому событию и какие надо переключать классы, какова минимально допустимая длина содержимого:

const selector = '[type="tel"]';
const event = 'input';
const minLength = 10;
const classNames = [ 'какой-то класс', 'какой-то другой класс' ];

Переключаем:

$(selector).on(event, function() {
  const isLengthOK = $(this).val().length >= minLength;
  $(this)
    .toggleClass(classNames[0], !isLengthOK)
    .toggleClass(classNames[1], isLengthOK);
});

или

document.querySelectorAll(selector).forEach(function(n) {
  n.addEventListener(event, this);
}, ({ target: t }) => {
  const isLengthOK = +(t.value.length >= minLength);
  classNames.forEach((n, i) => t.classList.toggle(n, isLengthOK === i));
});