No Login Data Private Local Save

Number Input Step Demo - Online See Validation Behavior

26
0
0
0

Number Input Step Validation Demo

Explore how the step, min, and max attributes affect HTML number inputs and their validation. See real‑time feedback and valid value sequences.

Configuration
Min Value
Max Value
Step
Default Value
Live Preview
Valid Values Sequence
* Values that satisfy min + i*step and are ≤ max.
Value Tester
Enter any value to test
Enter a value and click test.

Frequently Asked Questions

The step attribute specifies the legal number intervals for the input. The value must be min + i * step, where i is a non‑negative integer. If omitted, step defaults to 1. Only values that match this pattern (within floating‑point tolerance) pass step validation.

A step mismatch occurs when the entered value is inside the min–max range but does not equal min + i * step for an integer i. For example, with min=0 and step=2, entering 3 triggers a step mismatch because 3 − 0 = 3 is not divisible by 2.

Use step="any". This tells the browser to accept any number within the min and max limits without enforcing a fixed interval. No step mismatch will ever occur.

The starting point for step validation is always min. Valid values are min, min + step, min + 2*step, … up to max. Changing min shifts the entire list of accepted numbers, even if the step stays the same.

Yes, step can be any positive floating‑point number, e.g., 0.5, 0.01, or 3.14. The browser uses floating‑point arithmetic and a small tolerance to decide validity. This is useful for prices, measurements, or any decimal‑based input.

Use the setCustomValidity() method on the input element. Listen to the input or invalid event, check validity.stepMismatch, and call input.setCustomValidity('Your custom message') when true. Remember to clear the custom message (setCustomValidity('')) when valid again.

No, the browser does not auto‑round a user‑entered value. If the value does not fit the step pattern, the input becomes invalid (stepMismatch) and the form will not submit until the user corrects it. Some custom UI widgets may round, but native HTML inputs don’t.

Calculate: remainder = (value - min) / step. If Math.abs(remainder - Math.round(remainder)) > 1e-10, the value is not a valid step. Also check that the value is between min and max. For step="any", skip the remainder check.

An empty number input yields validity.valueMissing if the field is required. Without the required attribute, an empty value is considered valid and will be submitted as an empty string. Step validation only applies when a value is present.

A value must be ≤ max and satisfy the step pattern. The last valid value is the largest min + i*step that does not exceed max. Values larger than max trigger rangeOverflow, even if they would otherwise match the step rule.
🔧 Related Tools