words()

Ensure the input contains a specific range of words.

Setup

Attribute: sf-validation="words(MIN_WORDS, MAX_WORDS)"

Ensures that the input contains a specific range of words. This is particularly useful for fields like comments, descriptions, or any input where word count matters.

For example, you can require a user to enter between 5 and 20 words to ensure sufficient detail without overwhelming verbosity.

Please note: words() validation should be applied to the following input types: text, textarea, search, url.

HTML Example

index.html

<!-- Form Container -->
<div sf="myForm">
    <form>
        <!-- Textarea with Words Validation -->
        <div sf-step="step1">
            <label for="inputText">Enter your text:</label>
            <textarea name="inputText" id="inputText" sf-validation="words(0,3)" required></textarea>
            <div class="text-style-error">Text must be a maximum of 3 words.</div>
            <button sf-goto="next">Next</button>
        </div>
    </form>
</div>

Webflow Example

Adding sf-validation = words(0,3) to a <textarea> element.

---

Usage Examples

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

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

---

Attribute Configuration

Make sure to add the sf-validation="words(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 words(MIN_NUM,MAX_NUM) or words(MIN_NUM).

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

Dos and Don'ts

---

Do ✅

• words(2,100)

• words(2)

Don't ❌

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

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

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

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