aovi-svelte
v0.2.5
Published
Easy using Aovi in your Svelte apps.
Downloads
31
Maintainers
Readme
aovi-svelte
Easy using Aovi in your Svelte apps
See in REPL
Features
- 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
Common example
<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>
Example with aovi validator on the server
Server request handler
// 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
<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
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}
Custom validators
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>
API
aoviSvelte(object_to_validate)
Returns the aoviSvelte store
use(custom_validator)
Globally adds aovi custom validators. Usually called in app's root file like App.svelte
.
<store>.aovi
Returns aovi object to call validators. You must finish chain with .end
operator, to proceed validation and update store.
<store>.clear()
Clear all errors. Make <$store>.valid
true;
<store>.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.
<store>.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;
<store>.load(result_array)
Load aovi's result array in the validation store. May be used when you got aovi validation responce from the sever.
<store>.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>.<property>
Current property
value.
<$store>.err.<property>
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.