solid-validation

Lightweight, flexible form validation for Solid.js.

@sparkstone/solid-validation is a small, pragmatic form validation library for Solid.js. It provides a simple API for validating inputs, handling submission state, and managing error messages—without heavy abstractions or framework lock-in.

Links:

• GitHub: https://github.com/odama626/solid-validation
• npm: https://www.npmjs.com/package/@sparkstone/solid-validation

What it does

• Declarative input validation
  Validate inputs using directives, with support for sync and async validators.

• Submission state management
  Track whether a form is submitting or has been successfully submitted.

• Centralized error handling
  Errors are stored in a reactive object keyed by field name, making them easy to display.

• Minimal API surface
  Designed to feel “Solid-native” and stay out of your way.

• PocketBase helpers included
  Optional utilities to prepare form data and parse PocketBase API errors.

Installation

npm install @sparkstone/solid-validation

or

pnpm add @sparkstone/solid-validation

Basic usage

import { useForm } from "@sparkstone/solid-validation";

function MyForm() {
  const { formSubmit, validate, errors, isSubmitting, isSubmitted } = useForm();

  async function onSubmit(form: HTMLFormElement) {
    // handle submission
  }

  return (
    <form use:formSubmit={onSubmit}>
      <input name="username" required use:validate />
      <span>{errors.username}</span>

      <button type="submit" disabled={isSubmitting()}>
        {isSubmitting() ? "Submitting…" : "Submit"}
      </button>

      {isSubmitted() && <p>Form successfully submitted!</p>}
    </form>
  );
}

Custom validation

Validators receive the input element and return either:

• a falsy value for valid input
• a string error message for invalid input
• or a Promise resolving to either

function minLength(el: HTMLInputElement) {
  return el.value.length < 5 && "Must be at least 5 characters";
}

PocketBase integration

Optional helpers are included for PocketBase-backed forms.

Preparing form data

import { prepareFormDataForPocketbase } from "@sparkstone/solid-validation/pocketbase";

prepareFormDataForPocketbase(formData, form);

Parsing PocketBase errors

import { parsePocketbaseError } from "@sparkstone/solid-validation/pocketbase";

const errors = parsePocketbaseError(e);
// { email: "Invalid email", password: "Too short", form: "Something went wrong" }

Why it exists

Solid’s fine-grained reactivity makes it easy to build fast forms, but validation logic often becomes duplicated or tightly coupled to UI code. solid-validation keeps validation explicit, composable, and predictable—while offering first-class support for PocketBase-based workflows.

This remind you of a problem you've been dealing with?

I'd be happy to discuss it with you and see if it's something we could turn into a solution.