form-validation.js

Live Examples

vue@2 + element-ui

• Classic Form

• Delete or add form items dynamically

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

• Schema

  • Rules
  • Errors
  • Normalizer
  • Params
  • Deep Structure

• Validator

• Common Use Case

  • Custom Error
  • Same As
  • Unique

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