CODEWITHSUNDEEP
javascripthtmlformsvalidationfirefox
NSK
NSK

Reputation: 47

Ignore firefox step mismatch form validation

I have a number-type input field on an html form. It has a step value of 1000, because I want the user to be able to jump by 1000 when pressing the up and down arrows on the input field in the GUI.

I want the user to be able to type any value between 0 and 6000, including numbers that are not divisible by 1000, such as 1500.

However, Firefox puts a red line around the input box if the user types in a value not divisible by the step value. Is there a way to ignore this step mismatch?

Upvotes: 2

Views: 358

Answers (1)

Steven B.
Steven B.

Reputation: 9362

Target the invalid pseudo element with CSS and hide the box shadow.

input[type="number"]:invalid {
    box-shadow: none;
}
<input type="number" step="1000">

Upvotes: 0

Related Questions