How do I stop html form from submitting blank fields in emailjs?

I have created a form like this and used onclick which triggers the index.js to submit the form even if the form is empty.

<form>
    <div class="form-item">
        <label for="date">Date:</label>
        <input type="date" id="date" name="date" required>
    </div>
    <button type="submit" onclick="sendMail()">Submit</button>
</form>

My JavaScript file looks like this

function sendMail(){
    var params = {
        date: document.getElementById("date").value
    };

    const serviceID = "my_id";
    const templateID = "my_id";

    emailjs.send(serviceID, templateID, params).then((res) => {
        document.getElementById("date").value = ""; 
        console.log(res);
        alert("Done! Our Team will get back to you soon");
    })
    .catch((err) => console.log(err));
    
}

I have tried using another function to check form if it’s empty as follows, but it doesn’t work

function check() {
  var date = document.getElementById("date").value;
  if (!date) {
    alert("Please fill in all fields");
    return;
  }else {
    sendMail();
  }