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 ;
const schema = {
name: " string " ,
} ;
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 ;
const schema = {
name: {
type: " string " ,
required: true ,
min: 2 ,
max: 16 ,
},
} ;
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 ;
const schema = {
username: " string " , // or /^[a-z0-9]$/
} ;
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 ;
const schema = {
username: {
type: / ^ [a-z0-9] $ / , // or "string"
required: true ,
min: 3 ,
max: 20 ,
},
} ;
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 ;
const schema = {
age: " number " ,
} ;
Advanced example
import type { FieldsSchema } from ' @tuentyfaiv/svelte-form ' ;
const schema = {
age: {
type: " number " ,
required: true ,
min: 18 ,
max: 99 ,
},
} satisfies FieldsSchema ;
const schema = {
age: {
type: " number " ,
required: true ,
min: 18 ,
max: 99 ,
},
} ;
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 ;
const schema = {
active: " boolean " ,
} ;
Advanced example
import type { FieldsSchema } from ' @tuentyfaiv/svelte-form ' ;
const schema = {
active: {
type: " boolean " ,
required: true ,
},
} satisfies FieldsSchema ;
const schema = {
active: {
type: " boolean " ,
required: true ,
},
} ;
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 ;
const schema = {
birthday: " date " ,
} ;
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 ;
const schema = {
birthday: {
type: " date " ,
required: true ,
min: new Date ( 1950 , 0 , 1 ) . getTime () ,
max: new Date ( 2006 , 0 , 1 ) . getTime () ,
},
} ;
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 ;
const schema = {
avatar: " file " ,
} ;
Advanced example
import type { FieldsSchema } from ' @tuentyfaiv/svelte-form ' ;
const schema = {
avatar: {
type: " file " ,
required: true ,
min: 0 ,
max: 1024 * 1024 * 2 ,
},
} satisfies FieldsSchema ;
const schema = {
avatar: {
type: " file " ,
required: true ,
min: 0 ,
max: 1024 * 1024 * 2 ,
},
} ;
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 ;
const schema = {
user: {
name: " string " ,
username: " string " ,
age: " number " ,
active: " boolean " ,
birthday: " date " ,
avatar: " file " ,
},
} ;
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 ;
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 ,
},
},
} ;
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 ;
const schema = {
tags: {
type: " array " ,
item: " string " ,
},
} ;
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 ;
const schema = {
tags: {
type: " array " ,
item: {
type: " string " ,
required: true ,
min: 2 ,
max: 16 ,
},
required: true ,
min: 1 ,
max: 5 ,
},
} ;