JSFiddle - React, Tailwind, and code Playground

HTML

<form id="Form">
  <fieldset>
    <legend>New Item</legend>
    <label for="Time">Time:</label>
    <input type="text" required="" autofocus="" pattern="[0-9]{1,2}" placeholder="Time spend" name="Time" id="Time">
    <label for="Type">Action:</label>
    <select required="" name="Type" id="Type">
      <option value=""></option>
      <option>Run</option>
      <option>Swimming</option>
      <option>Bike</option>
      <option>Drink</option>
      <option>Eat</option>
      <option>Crossfit</option>
      <option>Yoga</option>
    </select>
    <label for="Date">Date:</label>
    <input type="text" required="" pattern="(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d" placeholder="dd/mm/aaaa" name="Date" id="Date">
    <button class="add" type="submit">Add</button>
  </fieldset>
</form>

JavaScript

var form = document.getElementById("Form");
var time = document.getElementById("Time");
form.onsubmit = function(e) {
  console.log('test');
  this.reset();
  time.focus();
  time.setCustomValidity("Please indicate that you accept the Terms and Conditions");
  return false;
};