examples/group/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>validation grouping example</title>
    <script src="../../node_modules/vue/dist/vue.js"></script>
    <script src="../../dist/vue-validator.js"></script>
    <style>
      input.invalid { border-color: red; }
      .errors { color: red; }
    </style>
  </head>
  <body>
    <div id="app">
      <validation name="validation1">
        <div class="username">
          <label for="username">username:</label>
          <!-- use the group prop -->
          <validity field="username" group="user" :validators="['required']">
            <input id="username" type="text" @input="handleValidate">
          </validity>
        </div>
        <div class="password">
          <label for="password">password:</label>
          <!-- use the group prop -->
          <validity field="password" group="password" :validators="{ minlength: 8, required: true }">
            <input id="password" type="password" @input="handleValidate">
          </validity>
        </div>
        <div class="confirm">
          <label for="confimr">password (confirm):</label>
          <!-- use the group prop -->
          <validity field="confirm" group="password" :validators="{ minlength: 8, required: true }">
            <input id="confirm" type="password" @input="handleValidate">
          </validity>
        </div>
        <input type="submit" value="send" v-if="valid">
        <div class="errors">
          <p v-if="usernameInvalid">Invalid yourname !!</p>
          <p v-if="passwordInvalid">Invalid password input !!</p>
        </div>
        <div class="debug">
          <p>validation result info</p>
          <pre>{{$validation}}</pre>
        </div>
      </validation>
    </div>
    <script>
      new Vue({
        // you can access the keypath of group name including
        computed: VueValidator.mapValidation({
          valid: '$validation.validation1.valid',
          usernameInvalid: '$validation.validation1.user.username.invalid',
          passwordInvalid: '$validation.validation1.password.invalid'
        }),
        methods: {
          handleValidate: function (e) {
            e.target.$validity.validate()
          }
        }
      }).$mount('#app')
    </script>
  </body>
</html>