How would you build a reusable Svelte validation action?

What's really being asked

This question probes whether you understand Svelte actions as element-level lifecycle hooks rather than generic utility functions. Interviewers want to see that you know actions run after the element mounts to the DOM, receive the actual node as their first argument, and are the idiomatic escape hatch when you need imperative DOM behavior inside a declarative framework.

The full answer

First, the signature. The action is a function that takes the HTMLInputElement as its first argument and an optional parameters object. It attaches event listeners for input or blur events. Second, direct DOM manipulation. Instead of changing Svelte component state, the action toggles CSS classes like invalid or sets ARIA attributes like aria-invalid directly on the node. Third, the return object. A well-built action returns an object containing an update method so Svelte can call it when parameters change, and a destroy method that removes event listeners and resets attributes when the element unmounts. Fourth, the advantages. Actions keep validation logic reusable across any input in any component, they prevent component scripts from becoming cluttered with imperative DOM code, they co-locate side effects with the element they affect, and they guarantee cleanup because Svelte invokes destroy automatically.

The mistakes people make

A red flag is treating the action like a Svelte store or a reactive statement. Another is mutating $state or other component state from inside the action; actions should touch the DOM, not the component's reactive graph. Forgetting to return a destroy handler signals you do not understand the lifecycle contract and raises concerns about memory leaks. Finally, suggesting the action returns HTML or renders content shows confusion with snippets or components.

What usually comes next

The interviewer might ask how you would pass dynamic validation rules to the action, which leads to the update hook. They might ask how to compose multiple actions on one element, or how to test validation logic independently of Svelte's component renderer. A senior candidate may also be asked how to expose validation state back to the parent component without breaking the action pattern, perhaps using a callback parameter or a custom event dispatched from the node.

A concrete example

You could write a function called validate that takes node and options. Inside, define a handler that runs regex or required checks against node.value. If invalid, call node.classList.add and node.setAttribute. Register the listener with node.addEventListener. Return an object with update to reconfigure rules when options change, and destroy to call removeEventListener and classList.remove. The component usage is simply input use:validate={rules}. This keeps the component template declarative while the imperative validation lives in a single portable module.