Live Demo
See it in Action
This TypeBox schema defines the validation constraints for the form.
TypeBox Schema
import {Type} from "@sinclair/typebox";
import type {FormInputText} from "cruddy-forms";
const EmailSchema = Type.Object( {
email: Type.RegExp(
/.+@example\.com/i,
{
element: "input",
hint: "Must end in @example.com",
inputType: "email",
placeholder: "[email protected]",
} satisfies FormInputText,
),
} );
const PASS_MIN = 6;
const PasswordSchema = Type.Object( {
password: Type.String( {
element: "input",
hint: `Use ${PASS_MIN} or more characters`,
inputType: "password",
minLength: PASS_MIN,
placeholder: "your password",
} satisfies FormInputText ),
} );
export const Schema = Type.Composite( [
EmailSchema, PasswordSchema,
] );
Resulting HTML Form
This form was generated by CruddyForms from the provided schema. Try it out to see the client-side validation in action!
Features
What you get with CruddyForms
A simple, free node module to include in your server-side typescript application.
Validation on the server using TypeBox
CruddyForms leverages TypeBox to provide serverside validation of data submitted through your forms.
Validation on the client using HTML5
CruddyForms generates HTML from your TypeBox schema to tell modern web browsers how to validate the data in your forms. Client-side validation works without the need for javascript.
Beautiful form styling using Normform CSS
CruddyForms generates HTML that works automatically with Normform CSS to elegantly render your forms and user validation messages.
Type safety for your server application
Building upon the foundation of typescript and TypeBox, CruddyForms provides a type-safe development interface.
Optional custom server-side validation
Need to do extra validation on the server? No problem! CruddyForms provides vanilla javascript to call your REST endpoint and display your custom error messages.
Framework neutrality
CruddyForms only generates HTML and vanilla javascript, and it only uses standard node APIs on the server. Use it with the client or server framework of your choice.
Adding CruddyForms to Your Site
Step 1: Add CruddyForms to your project.
Install the CruddyForms package into your project, using pnpm, yarn, or npm.
Step 2: Define the schema for your form using TypeBox
In your typescript server code, use the TypeBox module to set the constraints you want to enforce for each field in your form, such as minLength or maxLength. Use regular expressions for more complex constraints.
Step 3: Use CruddyForms to create the HTML for your form.
In your typescript server code, use the CruddyForms module to convert your TypeBox schema into an HTML form with built-in client-side validation. Serve the form to clients, along with the Normform CSS file.
Step 4: Use CruddyForms for server-side validation.
In your typescript server code, use the CruddyForms module to validate form submissions, in case a user bypasses client-side validation.
Step 5 (Optional): Add custom servier-side validation.
If you need additional server-side validation, e.g. making sure a username is unique, create a REST endpoint and tell CruddyForms about it. CruddyForms will add the endpoint data to the HTML form it generates, for use by cruddy-client.js. Serve cruddy-client.js along with the generated form, so that it will call your endpoint and display relevant error messages.
FAQs
Frequently Asked Questions
Why another forms module?
CruddyForms is designed to be lightweight and framework-agnostic. You can use it without any client-side javascript. In case you need custom server-side validation, CruddyForms generates a very small amount of (vanilla) client-side javascript to make the necessary requests.
Does it work with React? How about Vue?
CruddyForms doesn't rely on any client-side javascript frameworks, so you don't need React or Vue in order to use CruddyForms.
The client-side validation in CruddyForms seems to work pretty well. Are you sure it's not using client-side javascript?
It's true - basic client-side validation is done with HTML and some clever CSS, thanks to Normform! CruddyForms also provides a small client-side javascript file that you can use if you need support for custom server-side validation or toggling the visibility of password text.
What about older browsers that don't support built-in form validation?
CruddyForms does not attempt to do client-side validation in older browsers. However, CruddyForms makes it easy to implement server-side form validation, which is essential to protect your backend systems.
How can I verify that server-side validation is working for users of older browsers?
During development, you can temporarily set novalidate to true to create a form with browser validation disabled.
I want my form to asyncronously check the server to see if a username is available, before the user submits the form. Can CruddyForms help?
Yes! You can supply a REST endpoint for any field, and CruddyForms will generate vanilla javascript that will asyncronously call your endpoint and display any validation errors to the user.
Does CruddyForms work with Astro? How about SvelteKit?
CruddyForms has been tested with Astro SSR, but it is agnostic when it comes to server frameworks - it should work with just about any modern framework.
How can I change the styling of the forms?
Since CruddyForms uses Normform CSS, you can create your own modified version of the normform.css file. If you come up with something you like, let us know. It could become another theme option for CruddyForms :)
Get CruddyForms
Use it freely in your projects, under the terms of the MIT license.