Vee-validate: Required if with a boolean value

[webcoderkz]

VeeValidate 3:

Is it possible to use required_if rule with a boolean value:

<input rules="required_if:sms,true" type="checkbox" v-model="push" />
<input rules="required_if:push,true" type="checkbox" v-model="sms" />

Logic behind this is, when a user doesn't check at least one of these checkboxes, there should be an error.

[logaretm]

You don't have to always use the string expression for rules, you could use the object format:

<input :rules="{ required_if: { target: 'sms', values: [true] } }" />

Or you could simplify it and create your own version.

[webcoderkz]

@logaretm why is the target in quotes and values in an array? Could you put that info in a documentation.

[logaretm]

The target is a string value. the values param is an array of values.

The object format is used when you want to pass parameters in specific types and so you need to pass them in their correct types. The string format passes everything as a string.

It should be in the required_if docs:

https://logaretm.github.io/vee-validate/api/rules.html#required-if

The docs can be always improved, could you suggest where would this information be placed and how it is phrased? feel free to PR as well.

[webcoderkz]

Exactly there: https://logaretm.github.io/vee-validate/api/rules.html#required-if is no info about object rule type, like you described above. What if my sms is nested in an object, can i do this:

<input :rules="{ required_if: { target: 'nested.sms', values: [false] } }" /> ?

Also, if i have such rules, then if my sms value equals to false, then this field is required, right?

[logaretm]

Nesting has nothing to do with the target, the target is always the other field's name or vid not its bound model. so adding dots has no special meaning.

The required like rules must return 2 values in an object:

required: if the field is required.
valid: if it is valid.

https://logaretm.github.io/vee-validate/guide/advanced-validation.html#required-rules

[webcoderkz]

Ah, so a target should be an input's name or vid, i thought it should be a v-model's name.

[webcoderkz]

@logaretm, please, look at my full example:

<ValidationProvider
  v-slot="{ valid, errors }"
  :rules="{ required_if: { allowFalse: false, target: 'sms', values: [false] } }"
>
  <b-form-checkbox v-model="notification.push">Push</b-form-checkbox>
  {{ valid }}
</ValidationProvider>
<b-form-checkbox name="sms" v-model="notification.sms">SMS</b-form-checkbox>

My validator depends on sms value. If it's false, then validator is falsy, but when sms is checked (set to true), it returns true only AFTER form submit, there's an issue with reactivity it seems, it should change my {{ valid }} value BEFORE submit.

[topada]

To whom it may concern,
with veeValidate 3.3.11, I had to slightly modify the rules expression:

:rules="{ required_if: { target: 'Umsatzsteuer', value: true } }"

The field Umsatzsteuer yields a boolean value. Instead of values: [true] try value: true instead, and boy, don't forget the inital colon if you switch to the rule object expression!