how can we use vuelidate to validate a select input?

Here’s a quick and simple example of a select that is required.

Vue.use(window.vuelidate.default)
const { required, minLength } = window.validators

new Vue({
    el: "#app",
  data: {
    text: '',
    myselect: ''
  },
  validations: {
    text: {
        required,
      minLength: minLength(5)
    },
    myselect: {
    required
    }
  },
  methods: {
    status(validation) {
        return {
        error: validation.$error,
        dirty: validation.$dirty
      }
    }
  }
})
input {
  border: 1px solid silver;
  border-radius: 4px;
  background: white;
  padding: 5px 10px;
}

.dirty {
  border-color: #5A5;
  background: #EFE;
}

.dirty:focus {
  outline-color: #8E8;
}

.error {
  border-color: red;
  background: #FDD;
}

.error:focus {
  outline-color: #F99;
}
<script src="https://unpkg.com/[email protected]/dist/validators.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuelidate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="$v.text.$model" :class="status($v.text)">
  <select v-model="$v.myselect.$model" name="myselect" id="" :class="status($v.myselect)">
    <option selected value>Select One</option>
    <option value="1">Example 1</option>
    <option value="2">Example 2</option>
  </select>

  <pre>{{ $v }}</pre>
</div>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top