dynamic required fields and asterisks on input labels
See original GitHub issueI have a schema for an address like this:
export const AddressSchema = object().shape(
{
country: string().required(),
zip: string().required(),
city: string().required(),
street: string()
.when('poBox', {
is: (e) => !e,
then: string().required()
}),
number: string()
.when('street'.toString(), {
is: (e) => e,
then: string().required()
}),
poBox: string()
.when('street', {
is: (e) => !e,
then: string().required()
}),
},
[['street', 'poBox']]
);
The user has to enter street and number or the post office box. Now I want to add asterisks to the labels of the input fields dynamically. That means, when the input fields for street
, number
and poBox
are empty, there are asterisks at all there 3 labels. When the user enters a PO box, the asterisks at street
and number
disappear.
The question is, how can we ‘calculate’ whether a specific field is required for the current form values?
Issue Analytics
- State:
- Created 5 years ago
- Reactions:1
- Comments:5 (1 by maintainers)
Top Results From Across the Web
Use CSS to automatically add 'required field' asterisk to form ...
... and am using to dynamically add a red asterisk on the labels of required form elements without losing browsers' default form validation....
Read more >Field Label to Show required field red asterisk (the graphic ...
Hi, We have a form that uses an application item's value to determine what input fields are required. Using page validations we are...
Read more >Automatically add Asterisk to label of required fields - CodePen
Use JQuery to automatically add asterisks to your labels on required fields. ... <label for="text">Required field label text: <input id="text" type="text" ...
Read more >Indicating form controls as required using asterisks (*) - ADG
Asterisk (*) next to a form control's label usually indicates it as "required". Oftentimes, this asterisk's purpose is then explained somewhere else on...
Read more >Dynamic Mandatory field in a from - Mendix Forum
You can set the 'show label' of the textbox properties to 'no' and add two labels manually. This way you have one with...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
For future generations:
The resulting object contains
tests
objects which has the data you need.Passing currentValues is important if your schema is dynamic (using when/lazy etc).
You can use
schema.describe()
to introspect a schema object.