Using two validators at the same time

[r1zaac]

What happened?

Can we use both required and required_if at the same time?

I am trying to validate two select lists at the same time connected to each other as well. The situation/scenario is as follows:

At start, the second select list is disabled. When you choose an option from the first select list, it (the second list) becomes active. Now after choosing an option from the second list and submitting the form I am getting the error "The Error Type field is required" in fact that the field is already been filled.

I am trying to put two rules in the second select list with both "required" and "required_if" validators. (though "required_if" validator is working fine)

The code is as following:

<!-- Starting of Select List 1-->

<b-form-group>
    <validation-provider
     #default="{ errors }"
     name="Department"
     rules="oneOf:1,2|required"
    >
     <label>Department</label>
     <b-form-select
      v-model="dep"
      :options="departments"
      :state="errors.length > 0 ? false : null"
     />
     <t-error-message :errors="errors" />
    </validation-provider>
   </b-form-group>


<!--Starting of Select List 2 -->

   <b-form-group>
    <validation-provider
     #default="{ errors }"
     name="Error Type"
     rules="required_if:!dep=null|required"
    >
     <label>Error Type</label>
     <b-form-select
      v-model="selected"
      :options="bugTypes"
      :state="errors.length > 0 ? false : null"
      :disabled="dep === null"
     />
     <t-error-message :errors="errors" />
    </validation-provider>
   </b-form-group>

Here is the script:

<script>
import { required, required_if, oneOf } from '@validations'

export default {
 data() {
  return {
   required,
   required_if,
   oneOf,
   dep: null,
   selected: null,
 departments: [
    { text: 'Please Select One', disabled: true },
    { value: 1, text: 'Finance' },
    { value: 2, text: 'Operations' }
   ],
   bugTypes: [
    { text: 'Please Select One', disabled: true },
    { text: 'Error Type 1' }
   ]
   }
 }
}
</script>

How can I overcome with this problem? I would appreciate any help.

Reproduction steps

No response

Version

Vue.js 2.x and vee-validate 3.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

No console erros

Demo link

Sorry no links (Gov project. Hope you understand)

Code of Conduct

• I agree to follow this project's Code of Conduct

[r1zaac]

fix: Made a blunder. Trying to pass Error Type 1 without the value . Adding a string value to it solved the problem.

bugTypes: [
    { text: 'Please Select One', disabled: true },
    { value: 'a', text: 'Error Type 1' }
   ]