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