Easy using Aovi in your Svelte apps
See in REPL
- Based on Svelte's store feature
- One store may be used for different validation chains in same component(s)
- Instant checkers for any property in the store
- Easy to use with aovi validator on the server side
<script>
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(...)
}
}
</script>
User:
<input bind:value={$form.user} class:error={$form.err.user}/>
Password:
<input bind:value={$form.password} class:error={$form.err.password} />
{#if !$form.valid}
{#each $form.err.toArray() as error}
<p>{error}</p>
{/if}
{/if}
<button on:click={doSubmit}>Submit</button>
// 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())
}
<script>
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!');
}
}
</script>
Password:
<input bind:value={$form.password}/>
{#if !$form.valid}{$form.err.password}{/if}
<button on:click={doLogin}>Login</button>
Checkers are special stores derived from any property
in the aoviSvelte store. Its subscription returns true
or false
each time the value changes.
<script>
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]/));
</script>
<input bind:value={$form.password}/>
{#if $good_password}
Your password is strong!
{:else}
Please enter more than 8 signs and at least 1 capital letter.
{/if}
You can use any aovi custom validator. The best way is to declare it in the your app's root file like App.svelte
:
<script>
...
import {use} from 'aovi-svelte';
import {between} from './my-custom-validators.js';
...
use(between);
</script>
Then you can use this custom validator in the any chain in your other files.
<script>
import {aoviSvelte} from 'aovi-svelte';
...
form.aovi
.check('my_number')
.required()
.between(0,10);
...
</script>
Returns the aoviSvelte store
Globally adds aovi custom validators. Usually called in app's root file like App.svelte
.
Returns aovi object to call validators. You must finish chain with .end
operator, to proceed validation and update store.
Clear all errors. Make <$store>.valid
true;
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.
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 aovi's result array in the validation store. May be used when you got aovi validation responce from the sever.
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.
Equal true
when no validation errors, false
when there is at least one error occured.
Current property
value.
Equal false
when no validation error for the property
, or text of the error in other case.
Returns all errors messages as array. Returns []
when no errors.