A bootstrap integrated validation component for vue.js
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
docs
src
.babelrc
.editorconfig
.gitignore
README.md
build.js
bundle.css
package-lock.json
package.json

README.md

vue-bootstrap-validate

A bootstrap integrated validation component for vue.js.

The component adds a bootstrap style to the validation form elements status. The component uses vee-validate to perform validations.

Requirements

Installation

$ npm install vue-bootstrap-validate --save

Documentation

Full documentation click here

Usage

<field-validation :status="errors" :custom-errors="apiErrors" label="Input label" field="data">
  <input v-validate="'required'" class="form-control" v-model="databind" name="data" data-vv-as="data-to-show" type="text" />
</field-validation> 

<script>
import fieldValidation from 'vue-bootstrap-validate'

// needed if you're using a language different than English
import ptBR from 'vee-validate/dist/locale/pt_BR'
fieldValidation.locale(ptBR, 'pt_BR')
// -------

Vue.component('field-validation', fieldValidation);
</script>
this.$validator.validateAll().then(()=>{
    //ok
}).catch((e) => {
    //problems
});

Props

v-validate

The validation criteria. For a complete list of a available rules: available-rules

custom-errors

An optional object, where each property represents a form item, containing possible errors from the back-end

label

The label for the form element

field

The field name which will be stored on the errors property from the container component

name

It needs to be the same as the field property

data-vv-as

An optional label for the validation message

css-class

Additional classes to be add to the component

errors

A read only property which list the errors encountered on the form