how can we use vuelidate to validate a select input?

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

const { required, minLength } = window.validators

new Vue({
    el: "#app",
  data: {
    text: '',
    myselect: ''
  validations: {
    text: {
      minLength: minLength(5)
    myselect: {
  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="[email protected]/dist/validators.min.js"></script>
<script src="[email protected]/dist/vuelidate.min.js"></script>
<script src=""></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>

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

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top