CODEWITHSUNDEEP
vue.js
Jesús Cova
Jesús Cova

Reputation: 339

How can I use Vuelidate to validate a <select> input

Hi I am trying to validate a input with Vuelidate, I have seen in other posts but it's just question about text inputs but I need a select input validation, my code is:

Html Code:

<div class="form-group">
   <label for="exampleInputEmail1">Tipo de Caja</label>
   <select class="form-control" 
   v-model="$v.form.cashier_type_id.$model"
   :class="{
       'is-valid':!$v.form.cashier_type_id.$error && $v.form.serie.$dirty,
       'is-invalid':$v.form.cashier_type_id.$error && $v.form.serie.$dirty
   }"
   id="exampleFormControlSelect1">
   <option value="">- Seleccione -</option>
   <option value="2">Automática</option>
   <option value="3">Electrónica</option>
   <option value="1">Manual</option>
  </select>
</div>

My Vue code:

      validations: {
        form: {
            name: {
                required,
                minLength: minLength(2)
            },
            serie: {
                required,
                minLength: minLength(2)
            },
            cashier_type_id: {
                required
            }
        }
    }

I added required but the thing is that it does not change the color to green when I select the option so I wonder how can I do the validation?

Thanks

Upvotes: 4

Views: 6673

Answers (1)

innerurge1
innerurge1

Reputation: 728

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>

Upvotes: 5

Related Questions