Simple SolidJS Forms

Simple SolidJS Forms is utility library for easier form creation in SolidJS.

Quick start

Install it:

npm i simple-solidjs-forms
# or
yarn add simple-solidjs-forms
# or
pnpm add simple-solidjs-forms

Use it:

import { createForm } from "simple-solidjs-forms";

const App = () => {
    const form = createForm(
        {
            username: {
                initialValue: "",
                validations: [
                    { required: true, error: "Username is required!" },
                    { minLength: 5, error: "Username is too short!" },
                    { maxLength: 30, error: "Username too long!" },
                ],
            },
            age: {
                initialValue: "",
                isRadio: true,
                validations: { required: true, error: "Age is required" },
            },
            password: {
                initialValue: "",
                validations: [
                    { required: true, error: "Password is required!" },
                    {
                        pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
                        error: "Password doesn't meet requirements!",
                    },
                ],
            },
            confirmPassword: {
                initialValue: "",
                validations: {
                    custom: (fields) => fields.password === fields.confirmPassword,
                    error: "Passwords are not the same!",
                },
            },
        },
        async (fields, additional) => {
            //Fetch here
            const res = await fetch("/api/register", { body: JSON.stringify(fields) });
            //Set errors if response is not ok
            if (!res.ok) {
                additional.setErrors({ username: "This username is unavailable!" });
                return;
            }
            //Reset form when you want to
            additional.resetForm();
        }
    );

    return (
        <form onSubmit={form.submit}>
            <input type="text" placeholder="Username" {...form.fields.username()} />
            <span>{form.errors.username}</span>
            <span>Age </span>
            <span>Less than 18</span>
            <input {...form.fields.age("18-")} />
            <span>18+</span>
            <input {...form.fields.age("18+")} />
            <span>{form.errors.age}</span>
            <input type="password" placeholder="Password" {...form.fields.password()} />
            <span>{form.errors.password}</span>
            <input
                type="password"
                placeholder="Confirm password"
                {...form.fields.confirmPassword()}
            />
            <span>{form.errors.confirmPassword}</span>
            <button type="submit">Send</button>
        </form>
    );
};

Checkout another example in dev folder on Github.