title: vee-validate: Required only if a condition is met
body: <p>I'm using Vuejs2 and vee-validate for form validation. It's a great package, however I'm struggling to implement a conditional required field.</p>
  <p>When a particular radio option is selected, I want two select fields to be required. And when that radio is not selected, I want the two select fields to be optional.</p>
  <p>I've tried using the <code>attach</code> and <code>detach</code> methods. I can successfully detach the validation. And I can see when I attach a field it appears in the <code>fields</code> object. But it's not picked up by the validator.</p>
  <p>Here is my code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;form class=&quot;ui form&quot; role=&quot;form&quot; method=&quot;POST&quot; action=&quot;/activate&quot; v-on:submit.prevent=&quot;onSubmit&quot; :class=&quot;{ 'error': errors.any() }&quot;&gt;
      &lt;div class=&quot;ui segment&quot;&gt;
        &lt;h4 class=&quot;ui header&quot;&gt;Basic Company Information&lt;/h4&gt;
        &lt;div class=&quot;ui message&quot;&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;field&quot; :class=&quot;{ 'error': errors.has('name') }&quot;&gt;
          &lt;div class=&quot;ui labeled input&quot;&gt;
            &lt;label class=&quot;ui label&quot; for=&quot;name&quot;&gt;
              Company
            &lt;/label&gt;
            &lt;input id=&quot;name&quot; type=&quot;text&quot; name=&quot;name&quot; v-validate=&quot;'required'&quot; v-model=&quot;name&quot;&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;ui error message&quot; v-show=&quot;errors.has('name')&quot;&gt;
          &lt;p&gt;{{ errors.first('name') }}&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;grouped fields&quot; :class=&quot;{ 'error': errors.has('organisation_type_id') }&quot;&gt;
          &lt;label for=&quot;organisation_type_id&quot;&gt;Organisation type&lt;/label&gt;
          &lt;div class=&quot;field&quot;&gt;
            &lt;div class=&quot;ui radio checkbox&quot;&gt;
              &lt;input class=&quot;hidden&quot; type=&quot;radio&quot; name=&quot;organisation_type_id&quot; value=&quot;1&quot; data-vv-as=&quot;organisation type&quot; v-validate=&quot;'required'&quot; v-model=&quot;organisation_type&quot;&gt;
              &lt;label&gt;Buyer&lt;/label&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;field&quot;&gt;
            &lt;div class=&quot;ui radio checkbox&quot;&gt;
              &lt;input class=&quot;hidden&quot; type=&quot;radio&quot; name=&quot;organisation_type_id&quot; value=&quot;2&quot; checked&gt;
              &lt;label&gt;Seller&lt;/label&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;ui error message&quot; v-show=&quot;errors.has('organisation_type_id')&quot;&gt;
          &lt;p&gt;{{ errors.first('organisation_type_id') }}&lt;/p&gt;
        &lt;/div&gt;
        &lt;div v-show=&quot;organisation_type == '2'&quot;&gt;
          &lt;div class=&quot;field&quot; :class=&quot;{ 'error': errors.has('countries[]') }&quot;&gt;
            &lt;label for=&quot;countries&quot;&gt;Countries&lt;/label&gt;
            &lt;select class=&quot;ui fluid search dropdown&quot; id=&quot;countries&quot; name=&quot;countries[]&quot; multiple data-vv-as=&quot;countries&quot; v-validate=&quot;'required'&quot;&gt;
              &lt;option v-for=&quot;country in countries&quot; :value=&quot;country.value&quot;&gt;{{ country.text }}&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class=&quot;ui error message&quot; v-show=&quot;errors.has('countries[]')&quot;&gt;
            &lt;p&gt;{{ errors.first('countries[]') }}&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;ui message field-description&quot;&gt;
            &lt;p&gt;Select all the countries you export to.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;field&quot; :class=&quot;{ 'error': errors.has('ciphers[]') }&quot;&gt;
            &lt;label for=&quot;ciphers&quot;&gt;Ciphers&lt;/label&gt;
            &lt;select class=&quot;ui fluid search dropdown&quot; id=&quot;ciphers&quot; name=&quot;ciphers[]&quot; multiple data-vv-as=&quot;ciphers&quot; v-validate=&quot;'required'&quot;&gt;
              &lt;option v-for=&quot;cipher in ciphers&quot; :value=&quot;cipher.value&quot;&gt;{{ cipher.text }}&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class=&quot;ui error message&quot; v-show=&quot;errors.has('ciphers[]')&quot;&gt;
            &lt;p&gt;{{ errors.first('ciphers[]') }}&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;ui message field-description&quot;&gt;
            &lt;p&gt;Select all the ciphers you support.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt; &lt;!-- End organisation_type_id --&gt;
        &lt;button class=&quot;ui fluid green button&quot; type=&quot;submit&quot;&gt;Continue&lt;/button&gt;
      &lt;/div&gt; &lt;!-- .ui.segment --&gt;
    &lt;/form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      props: ['countriesJson', 'ciphersJson'],
      data() {
        return {
          name: null,
          organisation_type: '2',
          countries: [],
          ciphers: [],
        }
      },
      watch: {
        organisation_type: function(value) {
          var vm = this
          if (value == '2') {
            vm.$validator.attach('countries[]', 'required');
            const select = document.getElementById('countries');
            select.addEventListener('change', function() {
              vm.$validator.validate('required', this.value);
            });
            vm.$validator.attach('ciphers[]', 'required');
            const select = document.getElementById('ciphers');
            select.addEventListener('change', function() {
              vm.$validator.validate('required', this.value);
            });
          } else {
            vm.$validator.detach('countries[]')
            vm.$validator.detach('ciphers[]')
          }
        },
      },
      mounted() {
        this.countries = JSON.parse(this.countriesJson)
        this.ciphers = JSON.parse(this.ciphersJson)
      },
      methods: {
        onSubmit: function(e) {
          this.$validator.validateAll().then(success =&gt; {
            e.target.submit()
          }).catch(() =&gt; {
            return
          })
        }
      }
    }
  &lt;/script&gt;
  </code></pre>