"Валидация" банковских карт

Question

Прочитал, что для валидации используется luhn алгоритм. Бог с ним, мне нужно лишь понимать, VISA это или MIR. Подскажите, как имея input и событие input правильно построить логику таким образом, чтобы брались первые 4 цифры и на их основе показывалось, карта VISA это или MIR..ну и т.д.

Сделал нечто ниже..оно как бы и работает, но $('.error_text.n').fadeIn(350) показывается и сразу же исчезает. Как это фиксануть ?

З.Ы. Почему исчезает я понимаю, да. Подскажите как пофиксить

$(".cardNumber").on("input", function () {  
    if ($.isNumeric(this.value)) {
        if (this.value.length == 4)
        {
        
            if (this.value.slice(0,4) >= 2200 && this.value.slice(0,4) <= 2204)
            {
                //Значит это карта мир. При каждом новом символе это условие выполняется вновь и вновь..
                console.log(this.value.slice(0,4));
            }else{
                $('.error_text.n').fadeIn(350); 
            }
            
        }

    }

    if (!this.value)
    {
        $('.cardNumber').addClass('error_input');
        $('.error_text.n').text('Поле не может быть пустым');
        $('.error_text.n').fadeIn(350);     
    }else{
        $('.error_text.n').fadeOut(350);
        $('.cardNumber').removeClass('error_input');        
        
    }
});

Answer 1

В вашем случае дополнительно выполняется блок else (см. ниже) при попадании в "Мир":

if (!this.value) {
    // этот блок игнорируется
} else {
    // этот блок срабатывает
    $(".error_text.n").fadeOut(350)
    $(".cardNumber").removeClass("error_input")            
}

Answer 2

Решил вопрос. Пока полет нормальный.

$(".cardNumber").on("input", function () {  

        if (this.value.length >= 4)
        {
        
            if (this.value.slice(0,4) >= 2200 && this.value.slice(0,4) <= 2204)
            {
                //Значит это карта мир. При каждом новом символе это условие выполняется вновь и вновь..
                console.log(this.value.slice(0,4));
            }else{
                $('.error_text.n').text('Ошибка. Вы вводите номер, который не относится к карте МИР.');
                $('.error_text.n').fadeIn(350); 
            }
            
        }else{
            if (!this.value)
            {
                $('.cardNumber').addClass('error_input');
                $('.error_text.n').text('Поле не может быть пустым');
                $('.error_text.n').fadeIn(350);     
            }else{
                $('.error_text.n').fadeOut(350);
                $('.cardNumber').removeClass('error_input');        
                
            }           
            
        }
});

БЛОГ НА HUSL

"Валидация" банковских карт

Ответы (2 шт):