0.0.7 • Published 1 year ago
svup v0.0.7
Yup validator for Svelte
Elegant
Using Svelte actions
Full yup support
Usage
<script lang="ts">
import validator from "svup";
import { string } from "yup";
const { register, isValid, onSubmit, errors } = validator({
validateOnInput: true,
schema: {
email: string().required().email(),
password: string().required().min(8),
},
});
</script>
<form on:submit(onSubmit(console.log))>
<input type="email" name="email" use:register />
<input type="password" name="password" use:register />
<button disabled={!$isValid}>Submit</button>
</form>
Options
schema
(required): The validation schema to test against.validateOnInput
: Validate onon:input
event or not. If not set validation happen onon:blur
event.
Returns
register
is an action what should used on<input>
element, it will prepare everything for the validaton.isValid
is aReadable<boolean>
store what notify you if the form is valid or not.errors
is aReadable<boolean>
store what contains the error messages from yup schema.onSubmit
is anon:submit
event handler. It expect a callback what get the form values.
NOTE
<input>
name
property and schemakey
must match for validation.Simply throw
use:register
action onto inputfield and u good to go.You can define custom
on:input
andon:blur
listeners, they will called before validation