Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/AlexxNB/aovi-svelte

Easy using Aovi in your Svelte apps
https://github.com/AlexxNB/aovi-svelte

Last synced: 5 days ago
JSON representation

Easy using Aovi in your Svelte apps

Awesome Lists containing this project

README 

        
# aovi-svelte



Easy using [Aovi](https://www.npmjs.com/package/aovi) in your Svelte apps 





  




*See in [REPL](https://svelte.dev/repl/90668378fbd4427792a5319b70d1f459)*



## Features



* Based on Svelte's store feature

* One store may be used for different validation chains in same component(s)

* Instant [checkers](#checkers) for any property in the store

* Easy to use with aovi validator on the server side



## Common example



```html



    import {aoviSvelte} from 'aovi-svelte';



    // Create the aoviSvelte store containing object of values to be validated

    const form = aoviSvelte({

        user: '',

        password: ''

    });



    function doSubmit(){

        // Run aovi validators

        form.aovi

            .check('user')

                .required()

                .match(/^[a-z]+$/)

            .check('password')

                .required()

                .minLength(4)

            .end // You must always use .end operator



        if($form.valid){ // when aovi checks was successful, do thing

            fetch(...)

        }

    }



User: 



Password: 



{#if !$form.valid}

    {#each $form.err.toArray() as error}

        
{error}


    {/if}

{/if}



Submit

```



## Example with aovi validator on the server



#### Server request handler

```js

// handler for http-request with body_parser.json middleware

const aovi = require('aovi');

function authUser(req,res){

    const checkPassword = password => password === '12345';



    // Validate form object from request body(after body_parser.json

    let result  = aovi(req.body)

        .check('password')

            .required()

            .is(checkPassword,"Wrong password");



    // send responce as JSON string 

    res.end(result.json())

}

```



#### Client form

```html



    import {aoviSvelte} from 'aovi-svelte';



    // Create validation store

    const form = aoviSvelte({

        password: ''

    });



    async function doLogin(){

        // do request to the server

        const responce = await fetch('.../api/auth',{

            method:'POST',

            body:JSON.stringify({password: $form.password}) //OR (form.get()) to send all $form entries

        }); 



        // load validation result from server and update the store

        form.load(await responce.json());

        

        // do some staff if validation was ok

        if($form.valid){

            console.log('User authed!');

        }

    }



Password: 



{#if !$form.valid}{$form.err.password}{/if}



Login

```



## Checkers



Checkers are special stores derived from any `property` in the aoviSvelte store. Its subscription returns `true` or `false` each time the value changes.



```html



    import {aoviSvelte} from 'aovi-svelte';

    const form = aoviSvelte({

        password: ''

    });



    // checker will be true if password value is strong password.

    const good_password = form.checker('password',aovi => aovi.minlength(8).match(/[A-Z]/));



{#if $good_password}

    Your password is strong!

{:else}

    Please enter more than 8 signs and at least 1 capital letter.

{/if}

```



## Custom validators



You can use any [aovi custom validator](https://www.npmjs.com/package/aovi#custom-validators). The best way is to declare it in the your app's root file like `App.svelte`:



```html



    ...

    import {use} from 'aovi-svelte';

    import {between} from './my-custom-validators.js';



    ...

    use(between);



```

Then you can use this custom validator in the any chain in your other files.



```html



    import {aoviSvelte} from 'aovi-svelte';

    ...

    form.aovi

        .check('my_number')

            .required()

            .between(0,10);

    ...



```



## API



### `aoviSvelte(object_to_validate)`

Returns the aoviSvelte store



### `use(custom_validator)`

Globally adds aovi [custom validators](https://github.com/AlexxNB/aovi#custom-validators). Usually called in app's root file like `App.svelte`.



### `.aovi`

Returns aovi object to call validators. You *must* finish chain with `.end` operator, to proceed validation and update store.



### `.clear()`

Clear all errors. Make `<$store>.valid` true;



### `.get([property][,property]...)`

If no arguments specified, returns an initial object with current values. You can specify what properties should be in object by providing their names as a function arguments.



### `.error(message,[property])`

Add a new error message for the `property` in the store. If `property` ommited, add anonymus message, which will be appeared only in `<$store>.err.toArray()` call. Make `<$store>.valid` false;



### `.load(result_array)`

Load aovi's result array in the validation store. May be used when you got aovi validation responce from the sever.



### `.checker(property,func)`

Returns checker store, which has value `true` or `false`, based on the current value of the `property` and validation chain from `func`.  The `func` get aovi object as a first parameter, you must chain validators (except `.required` and `.check` ) to this object and return it. 



### `<$store>.valid`

Equal `true` when no validation errors, `false` when there is at least one error occured.



### `<$store>.`

Current `property` value. 



### `<$store>.err.`

Equal `false` when no validation error for the `property`, or text of the error in other case.



### `<$store>.err.toArray()`

Returns all errors messages as array. Returns `[]` when no errors.