Удалить цвет границы, если пустое значение для ввода

Question

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

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

Заранее спасибо.

var minLength = 9;
var maxLength = 12;
$(document).ready(function(){
  var altNumberVal = $('#AlternateNumber');
    altNumberVal.on('keydown keyup change', function(){
        var char = $(this).val();
        var charLength = $(this).val().length;
        if(charLength < minLength){
          altNumberVal.css("border-color","red");
        }
      else if(charLength > maxLength){
            $(this).val(char.substring(0, maxLength));
        }
      else{
            altNumberVal.css("border-color","inherit");
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<input id="AlternateNumber" placeholder="1234"></input>

Answer 1

Вам нужно добавить условие , чтобы проверить, что ввод не пуст charLength > 0

if(charLength < minLength && charLength > 0){}

var minLength = 9;
var maxLength = 12;
$(document).ready(function(){
  var altNumberVal = $('#AlternateNumber');
    altNumberVal.on('keydown keyup change', function(){
        var char = $(this).val();
        var charLength = $(this).val().length;
        if(charLength < minLength && charLength > 0){
          altNumberVal.css("border-color","red");
        }
      else if(charLength > maxLength){
            $(this).val(char.substring(0, maxLength));
        }
      else{
          
            altNumberVal.css("border-color","inherit");
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<input id="AlternateNumber" placeholder="1234"></input>