Adding required to input type date doent work

Question

I have a form with 4 inputs. I gave each of them "required" so the user will have to fill them in order to to finish the form.
but it seems that even though I dont insert data to the input type date, it wont show the "this field is required".
When I changed the order, and put the input type date, before the inputs type radio,
it works!
what could be the problem?

HTML

            <form action="" id="task-form">
                
                <div class="buttons-container">
                    <button class="cancel">cancel</button>
                    <button class="add-btn-inside-box" id="task-add-btn">Add</button>
                </div>
                
                <div class="title-area">
                    <h2 class="title">Title</h2>
                    <input type="text" placeholder="add a title..." id="task-title" required>
                </div>
                
                <div class="description-area">
                    <h2 class="description">Description</h2>
                    <textarea placeholder="add a title..." id="task-description" required></textarea>
                </div>
                
               

                <div class="tags-area">

                    <h2 class="tags">Tags</h2>

                    <input type="radio" id="work" name="tags" value="work" required>
                    <p class="work-tag" style="display: inline;">Work</p>

                    <input type="radio" id="study" name="tags" value="study" required>
                    <p class="study-tag" style="display: inline;" >Study</p>

                    <input type="radio" id="entertaiment" name="tags" value="Entertainment" required>
                    <p class="entertaiment-tag" style="display: inline;">Entertainment</p>

                    <input type="radio" id="family" name="tags" value="family" required>
                    <p class="family-tag" style="display: inline;">Family</p>

                </div>

                <div class="deadline">
                    <h2 for="date-task">Deadline</h2>
                    <input type="date" id="date-task" required/>
                </div>
              
                
            </form>
            
        </div>
    </div>
    
    
    
</div>

JS

const categoriesBtn = document.getElementById("categories-btn")
const allCategoriesEl = document.querySelector(".categories-options")
const plusBtn = document.getElementById("plus-btn")
const formEl = document.getElementById("task-form")
const taskContainer = document.querySelector(".task-box")
const taskCancelBtn = document.querySelector(".cancel")
const taskAddBtn = document.getElementById("task-add-btn")
const taskTitle = document.getElementById("task-title")
const taskDate = document.getElementById("date-task")
const taskDescription = document.getElementById("task-description")
const allTasksLocalStorage = bringTasksLocalStorage()


// show/hide the categories on the menu

categoriesBtn.addEventListener("click", () => allCategoriesEl.classList.toggle("categories-options-none"))

// tasks box functionality 

plusBtn.addEventListener("click", function showTaskBox() {
    taskContainer.classList.add("task-box-active")
})

taskCancelBtn.addEventListener("click", () => taskContainer.classList.remove("task-box-active"));

//main tasks box functionality:
taskAddBtn.addEventListener("click", (event) => {
    if(formEl.checkValidity() ){

        event.preventDefault()
    } 


    const taskTags = document.querySelector('input[name="tags"]:checked')
    const newTask = {
        Title: taskTitle.value,
        Description: taskDescription.value,
        Tag: taskTags.value,
        Date: taskDate.value
    }