• Stars
    star
    124
  • Rank 288,207 (Top 6 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

The most customizable validation framework for JavaScript.

form-validation.js

npm version CI Coverage Status gzip visitors

Live Examples

vue@2 + element-ui

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

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

back to top

Contributing

Please read 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 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 file for details

back to top

More Repositories

1

object-visualizer

Vue JSON inspector with Chrome-like theme.
Vue
217
star
2

import-meta-env

Build once, deploy anywhere. Startup/Runtime environment variable solution for JavaScript. It helps in developing applications following the 12-factor principles.
JavaScript
105
star
3

vue-next-select

The selecting solution for Vue 3
HTML
85
star
4

pinia-plugin-persistedstate-2

[no longer maintained] Please use https://github.com/prazdevs/pinia-plugin-persistedstate instead.
TypeScript
75
star
5

vue-use-popperjs

[deprecated] Please use [floating-ui](https://floating-ui.com/docs/vue) instead.
TypeScript
25
star
6

grpc-devtools

Browser DevTools extension for debugging gRPC network requests.
TypeScript
15
star
7

element-ui-sticky-table

Sticky for element-ui table
Vue
10
star
8

vuex-light

WARNING: This package is no longer to be maintained, use [Pinia](https://pinia.esm.dev/) instead.
TypeScript
8
star
9

yup-schema-faker

Fake data generator for yup
TypeScript
7
star
10

zod-schema-faker

Fake data generator for zod
TypeScript
5
star
11

runtime-environment-variables-example

Simple but complete solution for runtime environment variables
JavaScript
3
star
12

vue-composition-ui

Vue Composition UI is a renderless component library, it helps you to build a highly customized UI based on Vue 3 reactivity API.
Vue
1
star
13

dependency-inversion-principle-example

JavaScript
1
star
14

shorten-commit-sha

A Github Action to Export env and output sha with a shortened commit SHA
TypeScript
1
star
15

vue-route-props

A plugin that can automatically bind Vue-router query to Vue instance.
JavaScript
1
star