Помогите пожалуйста, прописала функцию валидации для to do list но она не работает

let input = document.querySelector('#input')
let addTask = document.querySelector('#add')
let delTask = document.querySelector('#del')
let list = document.querySelector('#list')

addTask.addEventListener('click', function(){
    if(input.value=== '') return;
    add()
    input.value = ''
  
})
// Валидация пустой строки

input.onblur = function(){
    console.log(this.value);
    if (this.getAttribute('data-length') > this.value) {
      this.classList.remove('valid');
      this.classList.add('invalid');
    } else {
      this.classList.remove('invalid');
      this.classList.add('valid');
    }
}

document.getElementById('.wrap').onblur = function() {
    console.log(this.value);
    if (this.getAttribute('text') > this.value) {
      this.classList.remove('valid');
      this.classList.add('invalid');
    } else {
      this.classList.remove('invalid');
      this.classList.add('valid');
    }
  };

function add(){
    const li= document.createElement('li')
    list.appendChild(li)
    li.textContent=input.value

    delTask.addEventListener('click', function(){
list.removeChild(li)
    })

    
}

   <div class="wrap">
<input type="text" id="input">
<button id="add">Додати задачу </button>
<button id="del">Удалити задачу</button> 
<ul id="list"></ul>
    </div>