I have some fields that I collapse and expand based on the user’s selection of other fields (i.e., a dropdown or checkbox). I’ve written a toggle function that works as expected except once a field is expanded and set to required the error styling (i.e., red border) is displayed on the field as if I tabbed through the field and left it blank. How do I collapse/expand fields and set their required state without tripping the error state. It makes it look like the user did something wrong, which they haven’t (yet).
export function toggleFields(field, required, expand) {
//field = field to toggle
//required = set field to be required true/false
//expand = expand field (true) or collapse field (false)
if (!expand) {
//if collapse parameter = false
//collapse field
field.collapse();
//set field to NOT required
field.required = false;
//clear field
field.value = null;
} else {
//if expand parameter = true
//clear field
field.value = null;
//expand field
field.expand();
if (required) {
//if required is true set field to required
field.required = true;
} else {
//set field to NOT required
field.required = false;
}
}
}