HTML5 form validations behave differently in Firefox

Question

I was trying to find a better title for this question, but I still don’t quite know how to explain it, but come on.

I have a simple form with three fields, if I miss one of them will be shown a tooltip saying that the field needs to be filled in correctly, so far so good, I correct the information in the form and send, when I submit the validations fle all red inputs looking like I had twice submitted the form, this behavior only happened in Firefox for both Macbook and Windows, tested in version 46.

Example:

var form = document.getElementById("Form");
var time = document.getElementById("Time");
form.onsubmit = function() {
  console.log('test');
  this.reset();
  time.focus();
  return false;
};

<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>

Link in jsfiddle

Answer 1

Each browser has a different way of handling HTML5 validations.

Google Chrome works with initial validations, that is, it will validate each field until it reaches the end. Firefox and IE no, they validate all form fields before returning the message.

What you comment on in your question is related to this specific code:

form.onsubmit = function() {
  console.log('test');
  this.reset();
  time.focus();
  return false;
};

In none of the browsers the form is being sent because in your code you are "resetting" the form (this.reset();) and that the form is not valid (return false;).

I don’t know if this code is just for demonstration, or what you expect with it, but you can withdraw the return that he will be sent.

On the question of validation, you cannot change the behaviors of browsers, what you can do is perform validations in different ways, creating your own and showing the way you want.