[Vuejs]-How to validate value without wraping it in form?

by

0👍

This is a basic example…

JS:

new Vue({
  el: '#app',

    data: {

        myvalue: '',
    focused : {
        mycheck: false
    },

     rules: {
        mycheck: [
          { required: true, message: 'Please input required', trigger: 'blur' },
          { min: 1, trigger: 'blur' }

        ],
    }
    }
})

Template: 

  <el-card class="box-card">
    <el-input @blur="focused.mycheck = true" v-model="myvalue" :class="{error: !myvalue && focused.mycheck}"></el-input>
    <span v-show="!myvalue && focused.mycheck" class="error">{{rules.mycheck[0].message}}</span>
  </el-card>     
</div>

Here is the link to the working solution: https://jsfiddle.net/w6ovxa80/

Leave a comment