Exercise: Dynamic Validation

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 the isAbroad control’s value (see below) is true, this field becomes mandatory and must have a length of at least five characters. If isAbroad changes to false, the address field becomes optional again without any minimum length restriction.

• isAbroad: This is a boolean field, initially set to false, informing whether the address is in the same country or abroad. If the boolean value toggles, new validation rules must be applied or removed to the address field, as described above.

• userProfile: This is a drop-down element with worker and student as possible values (none of them are initially selected). The control isn’t mandatory. If the student value is selected, the address field can’t be longer than 30 characters, and this validation rule also applies if the isAbroad flag is false. If the selected value is worker, there’s no length limit. Adding and removing this validation condition should work independently and not interfere with or remove the rules set by the isAbroad field.