@soxprox/form-validation v1.9.1
form-validation
This library provides an easy way to validate your javascript applications data. There is also the option to automatically update forms with generated error messages.
Installation
npm install @soxprox/form-validation
Getting started
import { validate } from "@soxprox/form-validation"
const data = {
password: "1234567"
}
const dataRules = {
password: {
rules: [
{
validate: 'minLength|8',
message: 'The password should be a minumum of 8 Characters long'
}],
updateDom: true,
fieldId: 'password',
displayAllErrors: true
}
}
const result = validationRules(data, dataRules)How to use
To validate your data import 'validate' from the library
import { validate } from "@soxprox/form-validation"validate takes 2 arguments
- An data object containing the data to be validated
- A rules object containing rules and instructions on how to validate the data and display an errors
The rules object should have property names that match the names of the properties in the data object.
Each rules property requires one property of type array called rules. The rules array should contain one object for each validation that is to be applied
Each validation object requires 2 properties.
- Validation Rule
- Error message if the rule fails the verification
let dataRules = {
age: {
rules: [
{
validate: 'greaterThan|17',
message: 'You need to be at least 18 years old'
},
{
validate: 'lessThan|100',
message: 'You need to be less than 100 years old'
}
]
}
}You have a choice to simply validate the data and return any errors as an array that you can handle and display yourself, or you can have the library populate the form with errors under each relevant field.
Example
Given the following data
let age = 101;
let name = 'Simon'You have a few options for validation.
- Validate all fields
let result = validate({ age, name }, dataRules)- Validate one or more fields
let result = validate({ age }, dataRules)The number of data rule does not need to match the number of data elements, only that a rule exists for those data elements that are provided.
The result is an object containing the properties passed in data with the value of each property being an array or string error messages.
In the example above the result would be
{
age: ['You need to be less than 100 years old']
}If the data passed all the rules, then the property array will be empty
{
age: []
}If the length of the array is 0, all the rules passed.
Supported rules
alpha
Checks that the value provide contains only characters a-zA-Z
string
Checks that the value provided is of type string
empty
Checks that the value is not empty or null
notEmpty
Checks that the value is empty or null
minLength|int
Checks the string length is greater or equal to the param provided
maxLength|int
Checks the string length is less or equal to the param provided
length|int
Checks the string length matches the param provided
lengthBetween|<min>int|<max>int
Checks the string length is between the two params provided
equal|string
Check that the value provided is equal to the param
notEqual|string
Check that the value provided is not equal to the param
inArray|value,value,value....
The array to validate against will be built up from the values supplied. Each value should be separated by a , (comma).
notInArray|value,value,value....
The array to validate against will be built up from the values supplied. Each value should be separated by a , (comma).
inRegex|regular expression
The regular expression should not be surrounded with /
Example
The following will validate that me@me.com contains an @ symbol
inRegex|.?@.?notInRegex|regular expression
The regular expression should not be surrounded with /
Validates that the value is not matched by the regular expression
includesAllWords|string,string...
Returns an error if the value does not include all the words in the array
doesNotIncludeWords|string,string...
Return an error if the value includes any of the words in the array
URL and Email validation
url
Checks that the URL is valid using the following regex
^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$Both of the following urls would be valid
Checks that the email address is in a valid format. It does more than just check that a @ symbol exists.
The following would not validate as a correct email address
name@domainnumber
Checks that the value passed in is a valid number
integer
Checks that the value passed is an integer
float
Checks that the value passed is a float
lessThan|number
Checks that the value is less than the number provided in the parameter
greaterThan|number
Checks that the value is greater than the number provided in the parameter
Example of using the library in svelte
<script>
import { validate } from '../index.js';
let name='';
let email='';
let errors = {
name: [],
email: [],
}
const dataRules = {
name: {
rules: [
{
validate: 'minLength|3',
message: 'Name must be at least 3 characters'
}
]
},
email: {
rules: [
{
validate: 'email',
message: 'Email should be valid'
}
]
}
};
let onKeyUp = async () => {
errors = await validate({ email }, dataRules);
}
let onClick = async () => {
errors = await validate({ email, name }, dataRules);
}
</script>
<h1>Sandpit Test Form</h1>
<div>
<label for="name">Name</label>
<input type="text" id="name" bind:value={name}>
{#if errors.name}
{#each errors.name as error}
<div>{error}</div>
{/each}
{/if}
</div>
<div>
<label for="email">Email</label>
<input type="text" id="email" on:keyup={onKeyUp} bind:value={email}>
{#if errors.email}
{#each errors.email as error}
<div>{error}</div>
{/each}
{/if}
</div>
<div>
<button on:click={onClick}>Submit</button>
</div>