must()

Enforce complex input criteria.

Setup

Attribute: sf-validation="must(number, lowercase, uppercase, symbols)"

Where: Applied to input elements like password, email, etc.

Validates that the input meets specified criteria for characters. Ensures inputs c=ontain a combination of numeric, lowercase, uppercase, and special characters as defined.

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

HTML Example

index.html

<!-- Form Container -->
<div sf="myForm">
    <form>
        <!-- Password Input with Must Validation -->
        <div sf-step="step1">
            <label for="password">Enter your password:</label>
            <input type="password" name="password" id="password" sf-validation="must(1,1,1,1)" required>
            <div class="text-style-error">Password must contain at least 1 number, 1 lowercase letter, 1 uppercase letter, and 1 symbol.</div>
            <button sf-goto="next">Next</button>
        </div>
    </form>
</div>

Webflow Example

---

Usage Examples

• must(1,2,1,0): At least 1 number, 2 lowercase characters, 1 uppercase character, and no symbols are required.

• must(0,1,1,1): At least 1 lowercase character, 1 uppercase character, and 1 symbol are required, with no number requirement.

• must(any,1,1,1): No limit on numbers, at least 1 lowercase character, 1 uppercase character, and 1 symbol are required.

• must(1,any,1,0): At least 1 number, no limit on lowercase characters, 1 uppercase character, and no symbols are required.

---

Attribute Configuration

Here are some instructions to keep in mind:

• Ensure to format the attribute value as must(number,lowercase,uppercase,symbol) where each parameter defines the minimum count required for:

  • number: Numeric characters

  • lowercase: Lowercase alphabetic characters

  • uppercase: Uppercase alphabetic characters

  • symbol: Special characters or symbols

• All four arguments are required.

• must() validation can be paired with native HTML attributes like pattern, maxlength, or minlength.

• You can pass any to indicate no limit for a specific criterion.

Dos and Dont's

---

Do ✅

• must(1,2,1,0)

• must(0,1,1,1)

• must(any,1,1,1)

• must(1,any,1,0)

Don't ❌

• must(null,2,1,0): Don't use alphabetic characters as arguments, except for any.

• must(1 , 2, 1 , 0): Don't use spaces.

• must(1,2): Don't use fewer than 4 arguments.

• must(1,2,1,0,1): Don't use more than 4 arguments.

• must(1.5,2.5,1.5,0): Don't use fractional numbers.