th">too short username!!</p>
      </div>
      <p>validation events:</p>
      <div class="events">
        <p :style="style" :data-event="event.type" v-for="event in events">{{event.timestamp}}: {{event.type}}</p>
      </div>
    </div>
    <script>
      var vm = new Vue({
        data: {
          style: { margin: 0, padding: 0 },
          validation: { result: {} },
          events: []
        },
        methods: {
          handleValid: function () {
            this.handleValidationEvent('valid')
