solform

A form management library for SolidJS that is very lightweight and simple!

(UPDATE) Just wanted to say, I was busy a little bit but soon, I will update this package to latest version of everything with all the fixes.

Why solform

• Very easy, fast, lightweight and powerful!
• It has built-in validation.
• You can easily customize it!
• Full type support

Create form

// Simplest
import { createForm } from "solform";

function App() {
  const { register } = createForm<{ name: string }>();

  return <input {...register("name")} />;
}

// Next Level
import { createForm, requiredValidator, emailValidator } from "solform";

function App() {
  const { register, submit, errors } = createForm<{
    email: string;
    count: number;
  }>({
    validators: {
      count: requiredValidator("Count is required"),
      email: [
        requiredValidator("This field is required"),
        emailValidator("Value should be email!"),
      ],
    },
    onSubmit: (values) => {
      // type safe values
      console.log(values);
    },
  });

  return (
    <div>
      <input {...register("email")} type="email" />
      {errors.email && <p class="error">{errors.email}</p>}

      {/* When you read count, it will be converted to number */}
      <input {...register("count")} type="number" />
      <button onClick={submit}>Submit</button>
    </div>
  );
}

// Full
import { createForm, requiredValidator, emailValidator } from "solform";

function App() {
  const { register, submit, loading, getAllValues, getValue, setValue, errors, watch } =
    createForm<{ email: string; count: number }>({
      initialValues: {
        count: 0,
      },
      validators: {
        count: requiredValidator("Count is required"),
        email: [
          requiredValidator("This field is required"),
          emailValidator("Value should be email!"),
        ],
      },
      onSubmit: async (values) => {
        await sleep(2000); // it will automatically set loading to true
        console.log(values);
        // loading is false again
      },
    });

  // will call the given function whenever the count changes
  watch("count", (updatedCount) => {
    console.log(updatedCount);
  });

  return (
    <div>
      <input {...register("email")} type="email" />
      {errors.email && <p class="error">{errors.email}</p>}
      {/* When you read count, it will be converted to number */}
      <input {...register("count")} type="number" />
      <button onClick={submit} disabled={loading()}>
        {loading() ? "Loading..." : "Submit"}
      </button>
    </div>
  );
}

function sleep(arg0: number) {
  throw new Error("Function not implemented.");
}

Built-in validators

• minLengthValidator(minLength, errorMessage)
• maxLengthValidator(maxLength, errorMessage)
• requiredValidator(errorMessage)
• emailValidator(errorMessage)

Creating new validators

const minimumNumberValidator =
  (minNumber: number, errorMessage: string): SolFormValidator<number> =>
  (val) =>
    val < minNumber ? errorMessage : undefined;

Tactics

• Always use watch inside a component, because it will call onMount and onCleanup.
• More soon...

What is next?

• Support for more fields, such as radio group
• Validate on change option.

How to contribute?

• Get a fork of this package, do your changes and create a pull request.
• Found a bug? create an issue.