timing.md

バリデーションタイミング変更

vue-validator は validator エレメントディレクティブと v-validate ディレクティブで自動的にバリデートを実行します。しかしながら時々、自動バリデーションを無効化し手動でバリデートを実行したい時があります。

initial

vue-validator は初回コンパイルを終えると、それぞれの v-validate ディレクティブは自動的に対象エレメントのバリデートを実行します。もしこの挙動を望まない場合は、 initial 属性又は v-validate を指定できます:

<div id="app">
  <validator name="validation1">
    <form novalidate>
      <div class="username-field">
        <label for="username">username:</label>
        <!-- 'inital' attribute is applied the all validators of target element (e.g. required, exist) -->
        <input id="username" type="text" initial="off" v-validate:username="['required', 'exist']">
      </div>
      <div class="password-field">
        <label for="password">password:</label>
        <!-- 'initial' optional is applied with `v-validate` validator (e.g. required only) -->
        <input id="password" type="password" v-validate:passowrd="{ required: { rule: true, initial: 'off' }, minlength: 8 }">
      </div>
      <input type="submit" value="send" v-if="$validation1.valid">
    </form>
  </validator>
</div>

This is useful, when you need to suppress the validation (like the server-side validation) with async validation feature (explain later). これは非同期的な特徴のバリデーション(サーバーサイドバリデーションのような)を抑制する必要がある場合に便利です。(後ほど説明します)

detect-blur と detect-change

vue-validator はフォーム要素(input, checkbox, select, 等)のDOMイベント (input, blur, change)を検知したら自動的にバリデートを実行します。このような場合は、detect-change, detect-blur 属性を使ってください:

<div id="app">
  <validator name="validation">
    <form novalidate @submit="onSubmit">
      <h1>user registration</h1>
      <div class="username">
        <label for="username">username:</label>
        <input id="username" type="text" 
          detect-change="off" detect-blur="off" v-validate:username="{
          required: { rule: true, message: 'required you name !!' }
        }" />
      </div>
      <div class="password">
        <label for="password">password:</label>
        <input id="password" type="password" v-model="password" 
          detect-change="off" detect-blur="off" v-validate:password="{
          required: { rule: true, message: 'required you new password !!' },
          minlength: { rule: 8, message: 'your new password short too !!' }
        }" />
      </div>
      <div class="confirm">
        <label for="confirm">confirm password:</label>
        <input id="confirm" type="password" 
          detect-change="off" detect-blur="off" v-validate:confirm="{
          required: { rule: true, message: 'required you confirm password !!' },
          confirm: { rule: password, message: 'your confirm password incorrect !!' }
        }" />
      </div>
      <div class="errors" v-if="$validation.touched">
        <validator-errors :validation="$validation"></validator-errors>
      </div>
      <input type="submit" value="register" />
    </form>
  </validator>
</div>

new Vue({
  el: '#app',
  data: {
    password: ''
  },
  validators: {
    confirm: function (val, target) {
      return val === target
    }
  },
  methods: {
    onSubmit: function (e) {
      // validate manually
      this.$validate(true)

      if (this.$validation.invalid) {
        e.preventDefault()
      }
    }
  }
})