Vuelidate Required If example

by jgarrido

HTML

<script src="https://unpkg.com/vuelidate/dist/vuelidate.min.js"></script>
<script src="https://unpkg.com/vuelidate/dist/validators.min.js"></script>
<div id="app">
  <label>
       <input type="checkbox" v-model="form.change_password" />
  </label>
  
  <label>
     <input v-model="form.password" />
     <div v-if="$v.form.password.$invalid">IS REQUIRED</div>
  </label>

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

CSS

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;
}

JavaScript 1.7

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


new Vue({
	el: "#app",
  data: {
    form: {
   			change_password: false,
        password: '',
    }
  },
  computed:{
  	isLoggedIn(){
      return true
    }
  },
  validations: {
    form: {
      password: {
      	required: requiredIf(function(form){
        	return this.isLoggedIn && form.change_password
        })
      }
    }
  }
})