tsurih v3.0.6
Tsurih
Svelte form validation library
- Minimalistic š
- Type safe š
- Small size š¦
- Ability to use custom validators āļø
- Strategies šļø
- Helper functions šŖ
- Focused on DX ā¤ļø
Example š
<script lang="ts">
import { get } from "svelte/store";
import { tsurih, debounce, validators } from "tsurih";
import type { TConfig, TContext } from "tsurih";
const debounced = debounce(() => {
return new Promise<boolean>((res) =>
setTimeout(() => {
console.log("š");
res(true);
})
);
}, 2000);
const customValidators = {
debounce: (message?: string) => {
return async (ctx: TContext<any, any, TConfig<any, any>>) => {
const result = await debounced();
const values = get(ctx.config.values);
if (!result) {
// ā Error
return message || "Field is not valid";
}
// ā
Success
return "";
};
},
};
const form = tsurih({
field1: true,
field2: "",
})
.setSchema({
field1: [validators.required()],
field2: [
validators.required(),
(ctx) => {
const values = get(ctx.config.values);
if (!values.field1) {
// ā Error
return "Field is not valid";
}
// ā
Success
return "";
},
customValidators.debounce(),
],
})
.setStrategy("blur");
$: watchOnlyField1 = $values.field1;
$: {
watchOnlyField1;
form.revalidate("field2");
}
const { errors, isSubmitting, values } = form;
</script>
<form
use:form.reg
on:submit="{form.onSubmit((values) => {
console.log(values);
})}"
>
<input
type="checkbox"
bind:checked="{$values.field1}"
name="{form.fields.field1}"
/>
{#if $errors.field1}
<span>{$errors.field1}</span>
{/if}
<input bind:value="{$values.field2}" name="{form.fields.field2}" />
{#if $errors.field2}
<span>{$errors.field2}</span>
{/if}
{#if $isSubmitting}
Submitting...
{/if}
<button type="submit">Submit</button>
</form>
āļø tsurih also provides validators, isString, isNumber, isArray, isObject, debounce utilities
āļø "validators" utility which has standard min, max, required, regexp, optionalMin, optionalRegexp.
āļø An additional validator "optional" is not needed as all default fields are optional. But if you, for example, want min or regexp to be checked only if a value is present, use optionMin or optionalRegexp . If you are writing your own validator which should be optional, then it should have an if(!ctx.value) return "" condition
Author
Released under the MIT License.
25 days ago
4 months ago
4 months ago
4 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago