Butuh bantuan untuk memperbaiki masalah dengan menghapus warna batas pada nilai Input.

Setelah pengguna memasukkan nilai dalam warna batas input akan dipicu tetapi ketika tidak ada nilai, warna batas harus berubah untuk mewarisi warna.

Terima kasih sebelumnya.

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>
0
Jepf 23 April 2020, 05:10

1 menjawab

Jawaban Terbaik

Anda perlu menambahkan kondisi untuk memeriksa input tidak kosong 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>
1
Hien Nguyen 23 April 2020, 02:16