Skip to Content
@jetio/schema-builder docs are live 🎉
ExamplesForm Validation

Form Validation

A registration form showing custom error messages per keyword, a $data reference for confirm-password matching, and a country-conditional state field.

const formSchema = new SchemaBuilder() .object() .properties({ username: (s) => s .string() .minLength(3) .maxLength(20) .pattern("^[a-zA-Z0-9_]+$") .title("Username") .description("Alphanumeric characters and underscores only") .errorMessage({ minLength: "Username must be at least 3 characters", maxLength: "Username cannot exceed 20 characters", pattern: "Username can only contain letters, numbers, and underscores", }), email: (s) => s .string() .format("email") .title("Email Address") .errorMessage("Please enter a valid email address"), password: (s) => s .string() .minLength(8) .pattern("^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)") .title("Password") .description("Must contain uppercase, lowercase, and number") .errorMessage({ minLength: "Password must be at least 8 characters", pattern: "Password must contain uppercase, lowercase, and a number", }), confirmPassword: (s) => s .string() .const({ $data: "1/password" }) .title("Confirm Password") .errorMessage("Passwords do not match"), age: (s) => s.integer().minimum(13).maximum(120).title("Age").errorMessage({ minimum: "You must be at least 13 years old", maximum: "Please enter a valid age", }), country: (s) => s.string().enum(["US", "UK", "CA", "AU"]).title("Country"), agreedToTerms: (s) => s .boolean() .const(true) .title("I agree to the terms and conditions") .errorMessage("You must agree to the terms and conditions"), }) .required([ "username", "email", "password", "confirmPassword", "age", "agreedToTerms", ]) .if((s) => s.object().properties({ country: (s) => s.const("US") })) .then((s) => s .object() .properties({ state: (s) => s .string() .pattern("^[A-Z]{2}$") .title("State") .errorMessage("Please enter a valid 2-letter state code"), }) .required(["state"]), ) .build();
Last updated on