validate one dynamic field on the basis of dynamic checkbox

I have dynamic fields what i want to is to validate one dynamic field on thee basis of other dynamic field with yup

this is dynamic field one

<Field
type="checkbox"
class="form-check-input form-check-sm "
:name="`sku[${index}].cross_dock_check`"
:id="`sku[${index}].cross_dock_check`"
/>


this is my second dynamic field

<Field :name="`sku[${index}].pickup_address`" v-slot="{ field }" :value="store.pickup_address_id">
<Multiselect v-model="field.value"
:searchable="true"
v-bind="field"
:options="add_sku_data.get_pickup_addresses"
placeholder="Address"
></Multiselect>
</Field>

what i want to do is if the
checkbox[0] is checked then the pickup_address[0]
checkbox[1] is checked then the pickup_address[1]
is required and so on


the validation for all address is working

sku: Yup.array().of(Yup.object().shape({pickup_address: Yup.number().required().typeError('Address is required')}))

so how should i be able to add condition , that address is required only if the checkbox is checked and please do tell how to handle v-model for dynamic fields

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

Hi Muhammad,

You can achieve this using the when function in your Yup schema.

const schema = Yup.object().shape({
checkboxName: Yup.boolean(),
address: Yup.string().when("checkboxName", {
is: true,
then: Yup.string().required("Address is required."),
}),
});

Refer to this demo: https://codesandbox.io/s/vee-yup-conditional-forked-3f49m?file=/src/App.vue:933-1137

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi Lauris,
thanks for the reply , the above mentioned solution is working when i am working with singer fields, like for only one checkbox and only one address,

however it is not working for dynamically added fields, as i have mentioned earlier in my post that

address : Yup.array().of(Yup.object().shape({pickup_address: Yup.number().required().typeError('Address is required')}))

is working fine for all the addresses added dynamically but it is not working with checkbox condition ,

could it be because their is no v-model added for checkbox ? how to handle v-model for dynamic fields?

Hi Muhammad,

I don't know all your requirements, but it sounds like in this case you will need to generate your schema dynamically as well.

Here is another example of how you can generate dynamic yup schema.
https://codesandbox.io/s/6i6vv?file=/src/index.js:1260-1264

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(