CODEWITHSUNDEEP
javascripthtmlvalidationrangemicrosoft-edge
Tobias Rohde
Tobias Rohde

Reputation: 71

Validation of range input in Microsoft Edge with values below 0

I found something strange while using Microsoft Edge. I have an input element of type range where the user can select values from 0.5 to 0.8 in steps of 0.1. When 0.5 or 0.8 is selected the form validates as expected. If 0.6 or 0.7 the validation returns false and the validation message for this field says that I have to enter a valid date.

<script type="text/javascript">
  function checkForm() {
    msg = (document.getElementById('myForm').checkValidity()) ? "OK" : "ERROR"
    document.getElementById('message').innerHTML = msg + ': ' + document.getElementById('field').validationMessage;
  }
</script>


<form id="myForm">
  <input type="range" min="0.5" max="0.8" step="0.1" value="0.6" labels="0.5, 0.6, 0.7, 0.8" id="field" name="field">
  <input type="button" name="save" value="Submit" onClick="checkForm()" />
</form>
<div id="message"></div>

The problem only occurs in Microsoft Edge (without Chromium rendering engine). Chrome, Firefox and Mobile Chrome are working as expected. When I change the range from 5 to 8 with steps 1 even Edge is working.

I'm running out of ideas ...

https://jsfiddle.net/7zwpbtok/

Upvotes: 1

Views: 349

Answers (1)

Tobias Rohde
Tobias Rohde

Reputation: 71

As a workaround for my problem I decided to use integers. As the selected value is a factor for a multiplikation I multiple the number I receive from the database (e.g. 0.6) by 100 and after the user selects a new value I divide it by 100 before storing into the database. So the user now selects a percentage value and not a factor. The result is the same but Edge can handle this as well as all the other browsers.

Upvotes: 0

Related Questions