vue-validator

Validator component for Vue.js

Requirements

• Vue.js 1.0.10+

NOTE

vue-validator is still alpha verison. Maybe, There are some breaking change. If you have some feedback, we are welcome in Vue.js Discussion 😺

Installation

npm

$ npm install vue-validator
# dev branch
$ npm install vuejs/vue-validator#dev

When used in CommonJS, you must explicitly install the router via Vue.use():

var Vue = require('vue')
var VueValidator = require('vue-validator')

Vue.use(VueValidator)

You don't need to do this when using the standalone build because it installs itself automatically.

CDN

jsdelivr

<script src="http://cdn.jsdelivr.net/vue.validator/2.0.0-alpha.5/vue-validator.min.js"></script>

Usage

new Vue({
  el: '#app'
})

We can use validator element directive and v-validate directive. The following is an example:

<div id="app">
  <validator name="validation1">
    <form novalidate>
      <input type="text" v-validate:username.required>
      <input type="text" v-validate:comment.maxlength="256">
      <div>
        <span v-show="$validation1.username.required">Rquired your name.</span>
        <span v-show="$validation1.comment.maxlength">Your comment is too long.</span>
      </div>
      <input type="submit" value="send" v-if="$validation1.valid">
    </form>
  </validator>
</div>

The validation results keep to validation scope as defined with vue-validator. In above case, the validation results keep to $validation1 scope (prefixed with $) which was specified with name attribute of validator element directive.

Validation result structure

The structure of validation results that was kept to validation scope is the below:

  $validation.valid
             .invalid
             .touched
             .untouched
             .dirty
             .pristine
             .modified
             .messages.field1.validator1
                             ...
                             .validatorX
                      .field2.validator1
                             ...
                             .validatorX
             .field1.validator1
                    ...
                    .validatorX
                    .valid
                    .invalid
                    .touched
                    .untouched
                    .dirty
                    .pristine
                    .modified
                    .messages.validator1
                             ...
                             .validatorX
             ...
             .fieldX.validator1
                    ...
                    .validatorX
                    .valid
                    .invalid
                    .touched
                    .untouched
                    .dirty
                    .pristine
                    .modified
                    .messages.validator1
                             ...
                             .validatorX

The various top-level properties has been defined in the validation scope, and the each field validation result has been defined as field namespace.

Field validation properties

• valid: whether field is valid. if it's valid, then return true, else return false.
• invalid: reverse of valid.
• touched: whether field is touched. if field was focused, return true, else return false.
• untouched: reverse of touched.
• modified: whether field value is modified. if field value was changed from initial value, return true, else return false.
• dirty: whether field value was changed at least once. if so, return true, else return false.
• pristine: reverse of dirty.
• messages: if invalid field exist, return error message wrapped with object, else undefined.

Top level validation properties

• valid: whether all fields is valid. if so, then return true, else return false.
• invalid: if invalid field exist even one in validate fields, return true, else false.
• touched: whether all fields is touched, if so, return true, else false.
• untouched: if untouched field exist even one in validate fields, return true, else false.
• modified: if modified field exist even one in validate fields, return true, else false.
• dirty: if dirty field exist even one in validate fields, return true, else false.
• pristine: whether all fields is pristine, if so, return true, else false.
• errors: if invalid even one exist, return all field error message wrapped with object, else undefined.

Validator syntax

v-validate directive syntax the below:

    v-validate:field.[validator]+[="primitive literal | object literal | binding"]

Literal

Primitive

The below is example that using literal of string value:

<validator name="validation">
  <form novalidate>
    Zip: <input type="text" v-validate:zip.pattern="'/^[0-9]{3}-[0-9]{4}$/'"><br />
    <div>
      <span v-if="$validation.zip.pattern">Invalid format of your zip code.</span>
    </div>
  </form>
</validator>

Object

The below is example that using object literal:

<validator name="validation">
  <form novalidate>
    ID: <input type="text" v-validate:id.minlength.maxlength="{ minlength: 3, maxlength: 16 }"><br />
    <div>
      <span v-if="$validation.id.minlength">Your ID is too short.</span>
      <span v-if="$validation.id.maxlength">Your ID is too long.</span>
    </div>
  </form>
</validator>

Binding

The below is example that using binding:

new Vue({
  el: '#app',
  data: {
    rules: {
      minlength: 3,
      maxlength: 16
    }
  }
})

<div id="app">
  <validator name="validation">
    <form novalidate>
      ID: <input type="text" v-validate:id.minlength.maxlength="rules"><br />
      <div>
        <span v-if="$validation.id.minlength">Your ID is too short.</span>
        <span v-if="$validation.id.maxlength">Your ID is too long.</span>
      </div>
    </form>
  </validator>
</div>

In addition to the above data scope example, you can specify also the computed property or methods.

Grouping

You can grouping validation results. the below example:

<validator name="validation1" :groups="['user', 'password']">
  username: <input type="text" group="user" v-validate:username.required><br />
  password: <input type="text" group="password" v-validate:password1.required.minlength="{ minlength: 8 }"/><br />
  password (confirm): <input type="text" group="password" v-validate:password2.required.minlength="{ minlength: 8 }"/>
  <div class="user">
    <span v-if="$validation1.username.required">Required your name.</span>
  </div>
  <div class="password">
    <span v-if="$validation1.password.invalid">Invalid password input !!</span>
  </div>
</validator>

Messages

You can specify error message that can get the validation scope.

<validator name="validation1">
  username: <input type="text" v-validate:username.required="{
    required: { rule: true, message: 'required you name !!' }
  }"><br />
  password: <input type="text" v-validate:password.required.minlength="{
    required: { rule: true, message: 'required you password !!' },
    minlength: { rule: 8, messsage: 'your password short too !!' }
  }"/><br />
  <div class="errors">
    <ul>
      <li v-for="obj in $validation1.messages">
        <div class="{{$key}}" v-for="msg in obj">
          <p>{{$key}}: {{msg}}</p>
        </div>
      </li>
    </ul>
  </div>
</validator>

Event

You can handle the valid event and invalid event. the below example:

new Vue({
  el: '#app',
  methods: {
    onValid: function () {
      console.log('occured valid event')
    },
    onInvalid: function () {
      console.log('occured invalid event')
    }
  }
})

<div id="app">
  <validator name="validation1">
    comment: <input type="text" @valid="onValid" @invalid="onInvalid" v-validate:comment.required/>
  </validator>
</div>

Custom validator with Assets

You can register your custom validator with using Vue.validator. the below the exmpale:

// register custom validator
Vue.validate('email', function (val) {
  return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(val)
})

new Vue({
  el: '#app'
  data: {
    email: ''
  }
})

<div id="app">
  <validator name="validation1">
    address: <input type="text" v-validate:address.email><br />
    <div>
      <span v-if="$validation1.address.email">invalid your email address format.</span>
    </div>
  <validator>
</div>

MEMO: Vue.validate asset is extended by vue-validator.

TODO

• async validation
• errors properties
• validate timing customize with options
• local asset registration (compontents asset-like)
• server-side validation error applying
• more tests !!
• and other issues...
• some chores (babel6, switch circle ci ...)

Contributing

• Fork it !
• Create your top branch from dev: git branch my-new-topic origin/dev
• Commit your changes: git commit -am 'Add some topic'
• Push to the branch: git push origin my-new-topic
• Submit a pull request to dev branch of vuejs/vue-validator repository !

Testing

$ npm test

License

MIT