Помогите подключить валидацию к to do list

function init() {

    var myModal = new Modal(document.getElementById('exampleModal'))

    renderTodos()

    document.getElementById('onSaveTodo').addEventListener('click', () => {
        const input = document.getElementById('toDoName')
        Api.addTodo({
            name: input.value,
            id: new Date().getTime()
        });
        myModal.hide()
        input.value = ''
        renderTodos()
    })
   
    
    document.getElementById('container').addEventListener('click', (e) => {
        const el = e.target
        if (el.classList.contains('remove-todo')) {
            const liEl = el.closest('li')
            // const allLi = Array.from(document.querySelectorAll('#container li'))
            // const numberToRemove = allLi.indexOf(liEl)
            // Api.removeTodo(numberToRemove);

            Api.removeById(liEl.id)
            renderTodos()
        }
    }, {capture: true})

}

function renderTodos() {

    document.getElementById('container').innerHTML = ''

    const data = Api.getData()

    data.forEach((item) => {
        const li = document.createElement('li')
        li.id = item.id
        li.innerHTML =
            `<div class="input-group mb-3">
                <div class="input-group-text">
                    <input class="form-check-input mt-0" type="checkbox" value="">
                </div>
                <input type="text" value="${item.name}" class="form-control">
                <div class="input-group-text">
                    <button type="button" class="btn btn-primary remove-todo">Remove</button>
                </div>
            </div>`;
        document.getElementById('container').appendChild(li)

    })


}

init()

<ul id="container">
 
    </ul>
    
    <!-- <input
    type="text"
    id="validation-input"
    data-length="6"
    placeholder="Введи 6 символов"
  /> -->
  <script type="module" src="app.js"></script>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control" placeholder="ToDo name" id="toDoName">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="onSaveTodo">Save changes</button>
                </div>
            </div>
        </div>
    </div>

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

}