Изменить границы ввода после заполнения

Question

Мне нужно изменить цвет нижней строки ввода после того, как ввод заполнил некоторую информацию. Одно важное условие - если ввод после заполнения все еще пуст (например, пользователь нажал на ввод, а затем решил не заполнять его и не коснулся ввода), цвет не нужно менять.

var input = document.getElementById("fname");
input.onchange = function(e) {
if(input.value != '') {
  e.target.style.borderBottom = "1px solid #ccffcc";
}
};

<form>
  <label for="fname" id="name">NAME</label>
  <input type="text" id="fname" name="fname" value="">
<input type="submit" value="send">
</form>

Answer 1

Использование :valid CSS псевдокласс

.custom-border {
  outline: none;
}

.custom-border:valid {
  border-bottom: 1px solid #ccffcc;
}

<form>
  <label for="fname" id="name">NAME</label>
  <input type="text" id="fname" name="fname" value="" class="custom-border" required>
  <input type="submit" value="send">
</form>