Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/soc221b/form-validation.js
The most customizable validation framework for JavaScript.
https://github.com/soc221b/form-validation.js
easy-to-use form form-validation form-verification framework-independent promise validate validation
Last synced: 23 days ago
JSON representation
The most customizable validation framework for JavaScript.
- Host: GitHub
- URL: https://github.com/soc221b/form-validation.js
- Owner: soc221b
- License: mit
- Created: 2020-03-19T13:17:43.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-06-16T04:19:05.000Z (3 months ago)
- Last Synced: 2024-07-05T16:38:40.872Z (3 months ago)
- Topics: easy-to-use, form, form-validation, form-verification, framework-independent, promise, validate, validation
- Language: TypeScript
- Homepage: https://iendeavor.github.io/form-validation.js
- Size: 802 KB
- Stars: 124
- Watchers: 2
- Forks: 5
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# form-validation.js
[](https://badge.fury.io/js/form-validation.js)
[](https://github.com/iendeavor/form-validation.js/actions)
[](https://coveralls.io/github/iendeavor/form-validation.js?branch=develop)
[](https://bundlephobia.com/result?p=form-validation.js)
# Live Examples
## vue@2 + element-ui
- [Classic Form](https://codesandbox.io/s/form-validationjs-x-element-ui-2boj7)
- [Delete or add form items dynamically](https://codesandbox.io/s/delete-or-add-form-items-dynamically-kxfp0)
[back to top](#)
# Feature
Intuitive APIs. 🎯
Asynchronous Rules Support.
Nested Object/Aray Support.
Array Manipulations (push, pop, shift, unshift, splice, reverse) Support.
Zero Dependencies, Native Javascript only.
[back to top](#)
# Overview
```javascript
const form = {
account: '',
}
const schema = {
account: {
$params: {
languageCode: 'en',
minLength: 6,
},
$normalizer({ value, key, parent, path, root, params }) {
return typeof value === 'string' ? value.trim() : ''
},
$rules: {
weak({ value, key, parent, path, root, params }) {
if (value.length < params.minLength) return 'Too short'
if (/\W/.test(value)) return 'Must contain special charachar'
},
async alreadyBeenUsed({ value, key, parent, path, root, params }) {
if (value === '') return
if (await isExists(value)) return false
},
},
$errors: {
weak({ value, key, parent, path, root, params }) {
return params.$rules.weak
},
alreadyBeenUsed({ value, key, parent, path, root, params }) {
const languageCode = params.languageCode || 'en-US'
return translate(`This account has already been used.`, { languageCode })
},
},
},
}
const validator = {}
// in order to track form's data sctructure (e.g., add new property to object, or push new element to array), you should always update your fields from the proxiedForm instead of the original form
const proxiedForm = FormValidation.proxy({ form, schema, validator })
// validate the entire form
await validator.$v.validate()
console.log(validator.$v.invalid)
// > true
console.log(validator.$v.errors.weak)
// > 'Too short.'
```
[back to top](#)
# Documentation
- [Schema](/docs/schema.md)
- [Rules](/docs/schema.md#rules)
- [Errors](/docs/schema.md#errors)
- [Normalizer](/docs/schema.md#normalizer)
- [Params](/docs/schema.md#params)
- [Deep Structure](/docs/schema.md#deep-structure)
- [Validator](/docs/validator.md)
- [Common Use Case](/docs/common-use-case.md)
- [Custom Error](/docs/common-use-case.md#custom-error)
- [Same As](/docs/common-use-case.md#same-as)
- [Unique](/docs/common-use-case.md#unique)
[back to top](#)
# Contributing
Please read [CONTRIBUTING.md](/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull
requests to us.
[back to top](#)
# Versioning
We use [SemVer](https://semver.org/) for versioning. For the versions available, see the tags on this repository.
[back to top](#)
# License
This project is licensed under the MIT License - see the [LICENSE](/LICENSE) file for details
[back to top](#)