Saltearse al contenido
Faivform

Schema

Esta página aún no está disponible en tu idioma.

Data validation is a common problem in web development. You want to make sure that the data you receive from the user is valid before you use it in your application. This is especially important when you have a form and you want to make sure that the data the user enters is valid.

Faivform provides a simple way to validate your data. You can use a schema to define the fields and their types.

Usage

To use a schema, you have to create a object where each key is a field name and the value is a type. if you are using TypeScript you need to import the type FieldsSchema.

import type { FieldsSchema } from '@tuentyfaiv/svelte-form';


const schema = {
  name: "string",
} satisfies FieldsSchema;

Configuration

All types have a simple configuration, you can use it to define the type of the field. You can check the configuration of each type in the reference section.

import type { FieldsSchema } from '@tuentyfaiv/svelte-form';


const schema = {
  name: {
    type: "string",
    required: true,
    min: 2,
    max: 16,
  },
} satisfies FieldsSchema;

Strings

To define a string field you have to use the "string" or RegExp type.

Example

import type { FieldsSchema } from '@tuentyfaiv/svelte-form';


const schema = {
  username: "string", // or /^[a-z0-9]$/
} satisfies FieldsSchema;

Advanced example

import type { FieldsSchema } from '@tuentyfaiv/svelte-form';


const schema = {
  username: {
    type: /^[a-z0-9]$/, // or "string"
    required: true,
    min: 3,
    max: 20,
  },
} satisfies FieldsSchema;

Numbers

To define a number field you have to use the "number" type.

Example

import type { FieldsSchema } from '@tuentyfaiv/svelte-form';


const schema = {
  age: "number",
} satisfies FieldsSchema;

Advanced example

import type { FieldsSchema } from '@tuentyfaiv/svelte-form';


const schema = {
  age: {
    type: "number",
    required: true,
    min: 18,
    max: 99,
  },
} satisfies FieldsSchema;

Booleans

To define a boolean field you have to use the "boolean" type.

Example

import type { FieldsSchema } from '@tuentyfaiv/svelte-form';


const schema = {
  active: "boolean",
} satisfies FieldsSchema;

Advanced example

import type { FieldsSchema } from '@tuentyfaiv/svelte-form';


const schema = {
  active: {
    type: "boolean",
    required: true,
  },
} satisfies FieldsSchema;

Dates

To define a date field you have to use the "date" type.

Example

import type { FieldsSchema } from '@tuentyfaiv/svelte-form';


const schema = {
  birthday: "date",
} satisfies FieldsSchema;

Advanced example

import type { FieldsSchema } from '@tuentyfaiv/svelte-form';


const schema = {
  birthday: {
    type: "date",
    required: true,
    min: new Date(1950, 0, 1).getTime(),
    max: new Date(2006, 0, 1).getTime(),
  },
} satisfies FieldsSchema;

Files

To define a file field you have to use the "file" type.

Example

import type { FieldsSchema } from '@tuentyfaiv/svelte-form';


const schema = {
  avatar: "file",
} satisfies FieldsSchema;

Advanced example

import type { FieldsSchema } from '@tuentyfaiv/svelte-form';


const schema = {
  avatar: {
    type: "file",
    required: true,
    min: 0,
    max: 1024 * 1024 * 2,
  },
} satisfies FieldsSchema;

Objects

To define a object field you have to compose it with the “primitive” types explained above.

Example

import type { FieldsSchema } from '@tuentyfaiv/svelte-form';


const schema = {
  user: {
    name: "string",
    username: "string",
    age: "number",
    active: "boolean",
    birthday: "date",
    avatar: "file",
  },
} satisfies FieldsSchema;

Advanced example

import type { FieldsSchema } from '@tuentyfaiv/svelte-form';


const schema = {
  user: {
    name: {
      type: "string",
      required: true,
      min: 2,
      max: 16,
    },
    username: {
      type: /^[a-z0-9]$/,
      required: true,
      min: 3,
      max: 20,
    },
    age: {
      type: "number",
      required: true,
      min: 18,
      max: 99,
    },
    active: {
      type: "boolean",
      required: true,
    },
    birthday: {
      type: "date",
      required: true,
      min: new Date(1950, 0, 1).getTime(),
      max: new Date(2006, 0, 1).getTime(),
    },
    avatar: {
      type: "file",
      required: true,
      min: 0,
      max: 1024 * 1024 * 2,
    },
  },
} satisfies FieldsSchema;

Arrays

To define a array field you have to use the "array" type.

Example

import type { FieldsSchema } from '@tuentyfaiv/svelte-form';


const schema = {
  tags: {
    type: "array",
    item: "string",
  },
} satisfies FieldsSchema;

Advanced example

import type { FieldsSchema } from '@tuentyfaiv/svelte-form';


const schema = {
  tags: {
    type: "array",
    item: {
      type: "string",
      required: true,
      min: 2,
      max: 16,
    },
    required: true,
    min: 1,
    max: 5,
  },
} satisfies FieldsSchema;