Why the required attribute doesn't work on form?

I'm creating this form but when I click the button "Create Task" the required attributes are been ignored.

I'm creating the form with a innerHTML and :

<form id="task-form">
  <label for="task-title">Title:</label>
  <input type="text" id="task-title" name="task-title" required>
  <label for="task-date">Due date:</label>
  <input type="date" id="task-date" name="task-date" required>
  <label for="task-description">Description:</label>
  <textarea name="task-description" id="task-description" required></textarea>
  <label for="checkbox">Add to a project?</label>
  <input type="checkbox" name="checkbox" id="checkbox">
  <label for="task-priority">Priority:</label>
  <select name="task-priority" id="task-priority" required>
    <option value="Low">Low</option>
    <option value="Medium">Medium</option>
    <option value="High">High</option>
  </select>
  <button type="submit" id="create-task-btn">Create Task</button>
</form>

Also the console give me one warning saying: "Form submission canceled because the form is not connected"

Solution

since you are dynamically adding the form you need to create listener

// Create the form element and set its properties
const form = document.createElement('form');
form.id = 'task-form';

// Create and append the form's content
form.innerHTML = `
    <label for="task-title">Title:</label>
    <input type="text" id="task-title" name="task-title" required>
    <label for="task-date">Due date:</label>
    <input type="date" id="task-date" name="task-date" required>
    <label for="task-description">Description:</label>
    <textarea name="task-description" id="task-description" required></textarea>
    <label for="checkbox">Add to a project?</label>
    <input type="checkbox" name="checkbox" id="checkbox">
    <label for="task-priority">Priority:</label>
    <select name="task-priority" id="task-priority" required>
        <option value="Low">Low</option>
        <option value="Medium">Medium</option>
        <option value="High">High</option>
    </select>
    <button type="submit" id="create-task-btn">Create Task</button>
`;

// Append the form to the document
const formContainer = document.getElementById('form-container');
formContainer.appendChild(form);

// Add an event listener for form submission
form.addEventListener('submit', function (event) {
    event.preventDefault(); // Prevent the default form submission behavior
    // Your form submission logic here
});

<div id="form-container"></div>