Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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

 

this is my second dynamic 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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • 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:

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.


Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(