Integrating with Svelte

This page will help you integrate FormValidation with the Svelte framework. For the sake of simplicity, we are about to validate a simple login form with just two fields to input the username and password:

<form id="loginForm" method="POST">
    <div class="form-group row">
        <label class="col-sm-3 col-form-label">Username</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" name="username" />
        </div>
    </div>

    <div class="form-group row">
        <label class="col-sm-3 col-form-label">Password</label>
        <div class="col-sm-4">
            <input type="password" class="form-control" name="password" />
        </div>
    </div>

    <div class="form-group row">
        <div class="col-sm-9 offset-sm-3">
            <button type="submit" class="btn btn-primary">Login</button>
        </div>
    </div>
</form>

Bundling the library

First of all, you need to look at the following guide to see how we can bundle FormValidation with popular bundlers:

Creating a FormValidation instance

The best place to initialize a FormValidation instance is inside the component's onMount event:

<form id="loginForm" method="POST">...</form>

<script>
    import { onMount } from 'svelte';

    import { formValidation } from '@form-validation/bundle/popular';

    // The FormValidation instance
    let fv;

    onMount(() => {
        // Create a FormValidation instance
        fv = formValidation(document.getElementById('loginForm'), {
            fields: {
                username: {
                    validators: {
                        notEmpty: {
                            message: 'The username is required'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: 'The username must be more than 6 and less than 30 characters long',
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: 'The username can only consist of alphabetical, number and underscore',
                        },
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: 'The password is required'
                        },
                        stringLength: {
                            min: 8,
                            message: 'The password must have at least 8 characters',
                        },
                    }
                },
            },
            plugins: {
                ...
            },
        });
    });
</script>

Using the plugins

In order to use the plugins, we need to import them:

import { onMount } from 'svelte';

import { formValidation } from '@form-validation/bundle/popular';

// FormValidation plugins
import { Icon } from '@form-validation/plugin-icon';
import { Trigger } from '@form-validation/plugin-trigger';
import { Bootstrap } from '@form-validation/plugin-bootstrap';
import { SubmitButton } from '@form-validation/plugin-submit-button';

let fv;

onMount(() => {
    fv = formValidation(document.getElementById('loginForm'), {
        fields: {
            ...
        },
        plugins: {
            trigger: new Trigger(),
            bootstrap: new Bootstrap(),
            icon: new Icon({
                valid: 'fa fa-check',
                invalid: 'fa fa-times',
                validating: 'fa fa-refresh'
            }),
            submitButton: new SubmitButton(),
        },
    });
});

Now the FormValidation instance is ready, you can listen on the events or call API:

onMount(() => {
    fv = formValidation(document.getElementById('loginForm'), {
        ...
    });

    // Listen on event
    fv.on('core.field.invalid', (e) => {
        ...
    });

    // Call API
    fv.revalidateField('...');
});

Registering validator

You don't need to follow this section if you are using a popular validator. The popular validator is ready when you import the FormValidation's core:

import { formValidation } from '@form-validation/bundle/popular';

In the other cases, you have to use the registerValidator() method to let the library knows where it can find a special or custom validator:

// Import an external validator
import { phone } from '@form-validation/validator-phone';

// Or import your own validator
import strongPassword from '/path/to/your/strongPassword';

onMount(() => {
    fv = formValidation(document.getElementById('loginForm'), {
        fields: {
            phoneNumber: {
                validators: {
                    phone: { ... }
                }
            },
            password: {
                validators: {
                    checkPassword: { ... }
                }
            },
        }
    });

    // Register validators
    fv.registerValidator('phone', phone)
      .registerValidator('checkPassword', strongPassword);
});

Destroying FormValidation instance

Svelte component triggers the onDestroy event when it's removed from page or not used anymore. It's the time to destroy our FormValidation instance by using the destroy() method:

import { onDestroy } from 'svelte';

let fv;

onDestroy(() => {
    if (fv) {
        fv.destroy();
    }
});

The Svelte component also performs the cleaning tasks if the onMount event returns a function. It's possible for us to write a more beautiful code without hooking the onDestroy event: