hook()

Run JavaScript logic for input validation criteria.

Setup

Attribute: sf-validation="hook(HOOK_NAME)"

Where: Apply to any input element in your form.

Utilize custom JavaScript functions identified by HOOK_NAME to conduct unique validation checks on form inputs.

Initialization

1. Add the sf-validation="hook(HOOK_NAME)" attribute to your form input element, such as the text input.

2. Then, register the hook using the Superform API. See the example below.

Example in steps:

1. Adding hook(validateEmail) to the HTML input element.

2. This calls a function validateEmail registered with JavaScript to check if the input is a valid email.

3. If not, Superform triggers the corresponding error.

HTML Example

index.html

<!-- Form Container -->
<div sf="myForm">
    <form>
        <!-- Email input with validation hook and error message -->
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" sf-validation="hook(validateEmail)" placeholder="Enter your email">
        <!-- Error message that appears if the email includes '@gmail.com'-->
        <div class="text-style-error">
            '@gmail.com' is not allowed. Please use a different email.
        </div>
        <button sf-goto="next">Next</button>
    </form>
</div>

index.js

// Wait for Superform to be ready before registering hooks
window.SuperformAPI = window.SuperformAPI || [];
window.SuperformAPI.push(({ getForm }) => {
    // Fetch the specific form by its name
    const myForm = getForm("myForm");

    // Register a validation hook for the email input
    myForm.registerInputValidationHook("validateEmail", ({ data }) => {
        // Access the 'email' field from the form data
        const emailInput = data.email;  

        // Check if the email address includes '@gmail.com'
        if (emailInput.includes("@gmail.com")) {
            // If it includes '@gmail.com', return false (invalid - triggers error)
            return false;
        } else {
            // If it does not include '@gmail.com', return true (valid)
            return true;
        }
    });
});

Webflow Example

Please note: registerInputValidationHook does not support async return. This means only boolean values are allowed as valid return types.

---

Attribute Configuration

• Ensure the attribute key is sf-validation and the value is hook(HOOK_NAME)

• Ensure the hook name is unique and does not contain spaces or special characters.

• Do not register multiple hooks with the same name. The default nature of hook registration is to override.

• Hooks must return a boolean value indicating the validity of the input.

Dos and Dont's

---

Do ✅

• hook(my_hook)

• hook(hookIsAwesome)

• hook(callhook)

• hook(CALLHOOK)

Don't ❌

• hook(111111): Don't use numbers as the start of the hook name.

• hook($$$-hook): Don't use symbols, except for underscores.

• hook(⚡️): Don't use emojis.

• hook(my hook is great): Don't use spaces.

→ Read more about the registerInputValidationHook method here.