Form validations in HTML5 behave differently in Firefox

Question

Form validations in HTML5 behave differently in Firefox

Navigation

#1 by (0 votes)

2

I was trying to find a better title for this question, but I still do not know how to explain it, but come on.

I have a simple form with three fields, if I miss one of them I will be shown a tooltip saying that the field needs to be filled correctly, so far so good, I correct the information in the form and the sending, when I send the validations they all fuse all the inputs in red looking like I had twice submitted the form, this behavior only happened in Firefox for both Macbook and Windows, I 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

javascript html html5

asked by anonymous 06.05.2016 / 13:33

1 answer

Logout function using PHP PDO Object oriented [closed] Instantiate dll created in C # .net for VB6

score 0 · Answer 1

Each browser has a different way of handling validations in HTML5.

Google Chrome works with init validations, meaning it will validate each field until it reaches the end. Firefox and IE do not, they validate all form fields before returning the message.

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

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

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

I do not know if this code is just for demonstration, or what you expect with it, but you can remove the return that it will be sent.

On the question of validation, you can not change the behavior of browsers, what you can do is to perform validations in different ways, creating your own and showing them any way you want.