minmax()

Ensure numbers fall within a range.

Setup

Attribute: sf-validation="minmax(MIN_NUM, MAX_NUM)"

With minmax(), you can validate that the input number value meets the required criteria. For example, the numeric value should be greater than or equal to 2 and less than or equal to 10.

Please note: minmax() validation should be applied to the following input types: number, range.

HTML Example

index.html

<!-- Form Container -->
<div sf="myForm">
    <form>
        <!-- Number Input with MinMax Validation -->
        <div sf-step="step1">
            <label for="numberInput">Enter a number:</label>
            <input type="number" name="numberInput" id="numberInput" sf-validation="minmax(1,99)" required>
            <div class="text-style-error">Number must be between 1 and 99.</div>
            <button sf-goto="next">Next</button>
        </div>
    </form>
</div>

Webflow Example

---

More Examples

• minmax(0,10): Allows values that are greater than or equal to 0 and less than or equal to 10.

• minmax(5): Allows values that are greater than or equal to 5, with no restriction on the maximum value.

---

Attribute Configuration

Make sure to add the sf-validation="minmax(MIN_NUM,MAX_NUM)" attribute key-pair to valid input types as mentioned above. Here are some instructions to keep in mind:

• The attribute value should follow the format minmax(MIN_NUM,MAX_NUM) or minmax(MIN_NUM).

Dos and Don'ts

---

Do ✅

• minmax(2,100)

• minmax(2)

• minmax(2.5,100.001)

Don't ❌

• minmax(any,100): Don't use alphabetic characters as arguments; only numbers are allowed.

• minmax(10 , 10): Don't use spaces.

• minmax(1,2,3): Don't use more than 2 arguments.