length()

Ensure input values always meet character length requirements.

Setup

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

Enforces input length restrictions within a form field. This validation ensures that only the specified range of characters are allowed, enhancing form data integrity and user input accuracy.

Please note: length() validation should be applied to the following input types: text, email, textarea, password, tel, color, search, url.

HTML Example

index.html

<!-- Form Container -->
<div sf="myForm">
    <form>
        <!-- First Name Input with Length Validation -->
        <div sf-step="step1">
            <label for="firstName">Enter your first name:</label>
            <input type="text" name="firstName" id="firstName" sf-validation="length(2,7)" required>
            <div class="text-style-error">First name must be between 2 and 7 characters.</div>
            <button sf-goto="next">Next</button>
        </div>
    </form>
</div>

Webflow Example

---

Usage Examples

• length(0,10): Minimum of zero characters are allowed, and the maximum number of characters can be up to 10.

• length(5): Minimum of 5 characters are required, with no restriction on the maximum length.

---

Attribute Configuration

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

• length() validation can be paired with native HTML attributes like pattern.

Dos and Don'ts

---

Do ✅

• length(2,100)

• length(2)

Don't ❌

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

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

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

• length(2.5,15.5): Don't use fractional numbers.

---

Video demonstration

Adding the length validation control to a text input inside Webflow.

---