---
description: Ensure input values always meet character length requirements.
---

# length()



## Setup

**Attribute:** `sf-validation="length(MIN_NUM,MAX_NUM)"`&#x20;

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.

{% hint style="info" %}
**Please note**: `length()` validation should be applied to the following input types: `text`, `email`, `textarea`, `password`, `tel`, `color`, `search`, `url`.


{% endhint %}



**HTML Example**

{% code title="index.html" %}
```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>
```
{% endcode %}



**Webflow Example**

<figure><img src="https://450000313-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FPanu40jkd86Dq41aOkFn%2FCleanShot%202024-07-03%20at%2017.15.34%402x.png?alt=media&#x26;token=1f846528-2214-4173-83e1-9cb73b8ba3bf" alt=""><figcaption></figcaption></figure>



***

## 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`.

{% hint style="info" %}
**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.


{% endhint %}



***

## Video demonstration

{% embed url="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FvfOxp5XgzhBLqRuPq2Cj%2FLength()_Validation.mp4?alt=media&token=b3dafd5b-68b2-4bb6-adeb-c4b57b738a17" %}
Adding the `length` validation control to a text input inside Webflow.
{% endembed %}



***
