Exercise: Dynamic Validation
Let’s practice the new concepts we’ve learned with a practical exercise.
We'll cover the following
This time, we need to develop a registration form starting with only one mandatory field, while leaving the others optional. However, when a specific value or state is selected in one of these fields, the validation rules will dynamically change accordingly.
Exercise requirements
We are requested to implement a form with the following controls and validation rules:
name
: This is a text field. It’s mandatory.address
: This is a text field, which is initially optional. If theisAbroad
control’s value (see below) istrue
, this field becomes mandatory and must have a length of at least five characters. IfisAbroad
changes tofalse
, theaddress
field becomes optional again without any minimum length restriction.isAbroad
: This is a boolean field, initially set tofalse
, informing whether theaddress
is in the same country or abroad. If the boolean value toggles, new validation rules must be applied or removed to theaddress
field, as described above.userProfile
: This is a drop-down element withworker
andstudent
as possible values (none of them are initially selected). The control isn’t mandatory. If thestudent
value is selected, theaddress
field can’t be longer than 30 characters, and this validation rule also applies if theisAbroad
flag is false. If the selected value isworker
, there’s no length limit. Adding and removing this validation condition should work independently and not interfere with or remove the rules set by theisAbroad
field.
Get hands-on with 1200+ tech skills courses.