Коробка-тень внутри текстовой области

Question

Кто-нибудь знает, как его починить? Моя главная цель в этом коде - изменить box-shadow, если значение textarea (input type = "text" not textarea) не пусто. И если он пуст, цвет box-shadow будет rgba (190, 0, 0, 0.75). Что я видел: если я пишу во входное значение = «что-нибудь», это работает (If-else без AddEventListener). Я не могу сделать это вживую, если вы понимаете, о чем я. Вот код:

    let status1 = document.querySelector("#name");

    status1.addEventListener('change value', function(){
            if (status1.value==""){
                status1.style.boxShadow="inset 0px 0px 5px 5px rgba(190, 0, 0, 0.75)";
            }else {
                status1.style.boxShadow="none";
            }
        }); 

Так что, если вы мне поможете, я это очень ценю <3 Берегите себя </p>

Answer 1

// Validation function
function validate(element) {

  const ErrorStyle = "inset 0px 0px 5px 5px rgba(190, 0, 0, 0.75)";
  const ValidStyle = "none";

  // Field value is invalid if length is 0 (true = has error)
  if (element.value.length === 0) {
    element.style.boxShadow = ErrorStyle;
    return
  }

  // Field value is valid if all tests above are false (no errors).
  element.style.boxShadow = ValidStyle;

}

// Get input field
const nameField = document.querySelector("#name");

// Bind input event to validation function
nameField.addEventListener('input', function (event) { validate(event.target) });

// Initial validation, comment out below to change to "lazy validation"
validate(nameField);