CODEWITHSUNDEEP
javascripthtmlvalidationinput
Fruchtzwerg
Fruchtzwerg

Reputation: 11389

HTML prevent step validation of number input

Defining the step attribute of a number input allows to de- and increase the number by pushing the up and down buttons:

<input type="number" min="0" max="100" step="10">

Unfortunately setting this attribute also enables the validation which means setting a value between two steps manually is not allowed anymore:

enter image description here

In my case this should be still allowed, without disabling the validation completely. So the step should be applied to the buttons but not to the validation. I've searched a lot but found no straight forward solution for it. This blog post shows there are several different validation errors like valueMissing, *typeMismatch, ... provided. The issue here seems to lie at the stepMismatch.

Is there a way where the step is still applied for the up and down buttons, still allowing to enter values in between without the validation to fail? Maybe by preventing the stepMismatch to be set?

Upvotes: 2

Views: 699

Answers (1)

HmBloqued
HmBloqued

Reputation: 62

A solution would be to add buttons that changes values with JavaScript rather than using the default HTML input. If you want the same aspect some css could help

Upvotes: 1

Related Questions