svelte-validoz

svelte-validoz is Validoz for Svelte for form validation.

See svelte-yup better library for data validation

Installation

$ npm install svelte-validoz

Sample code

<script>
import {validoz, isValid, Message} from 'svelte-validoz';
import {fields} from './form.js';
let result;
let submited = false;
$: if(submited){
    result = validoz(fields);
}
let formSubmit = () =>{
    submited = true;
    result = validoz(fields);
    // if everything validated
    if(isValid(result)){
        alert('Everything is validated!');
    }
}
</script>

<form on:submit|preventDefault="{formSubmit}">
    <h4>Form</h4>
    <input type="text" placeholder="Enter email" bind:value="{fields[0].value}"><br>
    <Message result={result} name="Email address"/>
    <input type="number" placeholder="Age" bind:value="{fields[1].value}"><br>
    <Message result={result} name="Age"/>
    <button type="submit">Submit</button>
</form>

// form.js file
export let fields = [
    {
        name: "Email address",
        type: "email",
        value: '',
        // you can pass your custom properties
    },
    {
        name: "Age",
        type: "number",
        value: 12,
        min: 18
    },
];

Remove those lines below if you want to revalidate only after submits.

let submited = false;
$: if(submited){
    result = validoz(fields);
}

All messages in one place

Example below to put all messages in one place by AllMessages component

<script>
import {validoz, isValid, AllMessages} from 'svelte-validoz';
import {fields} from './form.js';
let result;
let submited = false;
$: if(submited){
    result = validoz(fields);
}
let formSubmit = () =>{
    submited = true;
    result = validoz(fields);
    // if everything validated
    if(isValid(result)){
        alert('Everything is validated!');
    }
}
</script>

<form on:submit|preventDefault="{formSubmit}">
    <h4>Form</h4>
    <input type="text" placeholder="Enter email" bind:value="{fields[0].value}"><br>
    <input type="number" placeholder="Age" bind:value="{fields[1].value}"><br>
    <AllMessages result={result}/> // add it once
    <button type="submit">Submit</button>
</form>

Date example

import {validoz, isValid, isValidByName} from 'validoz';
let field = [
{
    name: "Date",
    type: "date",
    value: '24/05/2020',
    dateFormat: 'dd/mm/yyyy',
    startDate: '08/02/2020',
    endDate: '24/05/2020',
}
];

let result = validoz(field);
console.log(result); // { field: 'Date', message: '' }
isValid(result); // true
isValidByName(result, 'Date'); // true

Types

| name | Description | | ------ | ------ | | text | Any characters | | password | String must contain at least one numberic, one upper case, one lower case characters and the length at least 6 characters | | fullname | String should contain at least 2 words with 3 characters for each of the words and separated by space. It can contain more than one word.| | username | Like Instagram username. | | word | Alphabet characters. | | number | An integer number | | date | Example 21/03/2020 string. | | time | Example 05:12 string. |

Field properties

| name | Description | | ------------- | ------ | | name | Field name | | value | Field value | | type | Field type | | required | Boolean. default: true | | min and max | Minumum and Maximum of type number. Each of them can be passed alone. | | minDigits and maxDigits | Minumum and Maximum digits of type number. Each of them can be passed alone. | | minLength and maxLength | Minimum and Maximum length of the string types. | | dateFormat | String values of mm/dd/yyyy, mm-dd-yyyy, dd/mm/yyyy, dd-mm-yyyy, yyyy/mm/dd and yyyy-mm-dd | | equal | A field value and equal value to be equal. | | notEqual | A field value and equal value not to be equal. |

Other example

let {validoz, isValid, isValidByName} = require('validoz');

let {field} = require('./form.js');
let result = validoz(field);
console.log(result); 
/*
Returns: 
[
  { field: 'Full name', message: '' },
  { field: 'Email address', message: 'Email address is invalid' },
  { field: 'Age', message: 'Age must be between 18 and 60' },
  { field: 'Best friend', message: 'Best friend value is wrong' },
  {
    field: 'Password',
    message: 'Password must contain at least one numberic, one upper case, one lower case characters and the length at least 6 characters'
  }
]
*/
isValid(result); // false
isValid(result); // false
isValid(result[0]); // "Full name", true
isValidByName(result, 'Full name'); // true
isValidByName(result, 'Email address'); // false
isValidByName(result, 'Password'); // false

// form.js file
export let field = [
    {
        name: "Full name",
        type: "text",
        value: 'Hello world',
        minLength: 6
    },
    {
        name: "Email address",
        type: "email",
        value: '[email protected]'
    },
    {
        name: "Age",
        type: "number",
        value: 12,
        min: 18,
        max: 60,
    },
    {
        name: "Best friend",
        type: "text",
        value: 'Doe',
        equal: 'John' // value must be John
    },
    {
        name: "Password",
        type: "password", // you can also pass text if you don't want regex pattern to be conditioned
        value: '123456',
        minLength: 6,
        maxLength: 30,
    }
];

Other Examples with source code

• Example1
• Example2
• Integerating with Svelte Material UI (SMUI)

Author

Kamyar Lajani

License

MIT