Why `title` input doesnt act as `required` when I press enter?

Question

As the title says... I have my input element with required and button with submit type, but also have e.preventDefault() on JS and I dont know if thats the reason why it doesnt work and if so, how to fix it

`<div id="modal" class="">
    <form id="formContainer" class="pop-up container">
        <button id="closeBtn" class="btn"> X</button>
        <input id="title" type="text" placeholder="Title" minlength="1" required />
        <input id="author" type="text" placeholder="Author" >
        <input id="country" type="date" placeholder="Country">
        <button id="enterBtn" class="btn" type="submit"> Enter </button>
    </form>
</div>


const enterBtn = document.getElementById('enterBtn')
enterBtn.addEventListener('click', (e) => {
    e.preventDefault()
    addToBookLibrary(title, author, country)
})`