sveltekit-yup

sveltekit-yup

Svelte component library using Yup for form validation.

An update has been made for the svelte-yup project sveltekit.

Installation

$ npm i sveltekit-yup --save-dev

$ npm i yup

Sample code

<script>
    import * as yup from 'yup';
    import {YupForm, YupMessage} from 'sveltekit-yup';
    let schema = yup.object().shape({
        name: yup.string().required().max(30).label("Name"),
        email: yup.string().required().email().label("Email address"),
    });
    let fields = {email: "", name: ""};
    let submitted = false;
    let isValid;
    function formSubmit(){
        submitted = true;
        isValid = schema.isValidSync(fields);
        if(isValid){
            alert('Everything is validated!');
        }
    }
</script>

<YupForm class="form" {schema} {fields} submitHandler={formSubmit} {submitted}>
    <input type="text" bind:value={fields.name} placeholder="Name">
    <YupMessage name="name" />
    <input type="text" bind:value={fields.email} placeholder="Email address">
    <YupMessage name="email" />
    <button type="submit">Submit</button>
</YupForm>

Add isInvalid for making input border style.

Example:

<script>
...
import {YupMessage, isInvalid} from 'sveltekit-yup';
...
$: invalid = (name)=>{
    if(submitted){
        return isInvalid(schema, name, fields);
    }
    return false;
}
...
</script>

<input type="text" class:invalid={invalid("name")} bind:value={fields.name} placeholder="Name">
<style>
.invalid {
    border-color: red !important;
}
</style>

All messages in one place

Example below to put all messages in one place by YupAllMessages component.

import {YupAllMessages} from 'sveltekit-yup';

<YupAllMessages />

Custom Message color

<YupForm ... color="#b00020">

Components

name	props	description
YupForm	schema, fields, submitHandler, submitted and color
YupMessage	name	Error message of a field name by name prop. name should be the schema field name (no label name)
YupAllMessages		Puts all field messages in one place

Functions

isInvalid(schema:Object, name:String, fields:Object)

Example disable button until everything is validated

...
let btnDisabled = false;
$: if(submitted){
    btnDisabled = true;
    isValid = schema.isValidSync(fields);
    if(isValid){
        btnDisabled = false;
    }
}
...

<button type="submit" disabled={btnDisabled}>Submit</button>

Author

Emrullah TUNCAY

License

MIT