Dynamic Form Field Requirements in Web Development

Background Web forms often require dynamic behavior based on user interactions. In web development, handling such dynamic requirements, especially in the context of form field validations, presents a unique challenge.

Purpose The objective was to implement a solution that could dynamically change the required status of certain form fields. This change was dependent on the state of a checkbox, specifically a "Non-Booked Case" checkbox. When this checkbox was toggled, certain fields in the form needed to update their "required" status accordingly, both functionally and visually.

The Challenge The primary challenge was twofold:

1. Functionally updating the required status of the fields based on user interaction.
2. Visually reflecting this change, particularly since the visual indicator (an asterisk for required fields) was implemented via CSS.

Solution Overview Two distinct approaches were developed to address these challenges:

1. Regular Approach (toggleFieldRequirement Function):

   • This approach is typically used for dynamically setting the required status of fields.
   • It involves directly manipulating the DOM elements' attributes to reflect the required status.
   • The aria-required and aria-invalid attributes are updated based on the field's required status.
   • A corresponding visual indicator (like a hidden/showing asterisk) is controlled via the display property of a specific validator element.

2. Special Scenario Approach (setFieldRequiredStatus Function):

   • Developed to handle cases where the visual indicator is added through CSS using the :after pseudo-element.
   • This function dynamically creates and injects a style tag into the document head.
   • It directly manipulates the CSS rule to show or hide the asterisk, overriding the default CSS.

Regular Approach Code:

// Function to toggle field requirement based on Non-Booked Case

function toggleFieldRequirement(isNonBookedCase, fieldIdSuffix) {

    var fieldInput = document.getElementById(fieldIdSuffix + "_name");

    var requiredValidator = document.getElementById("RequiredFieldValidator" + fieldIdSuffix);

    if (isNonBookedCase) {

        if (fieldInput) {

            fieldInput.setAttribute('aria-required', 'false');

            fieldInput.removeAttribute('aria-invalid');

        }

        if (requiredValidator) {

            requiredValidator.style.display = 'none';

        }

    } else {

        if (fieldInput) {

            fieldInput.setAttribute('aria-required', 'true');

            fieldInput.setAttribute('aria-invalid', 'true');

        }

        if (requiredValidator) {

            requiredValidator.style.display = '';

        }

    }

}

document.addEventListener("DOMContentLoaded", function() {

    var isNonBookedCaseChecked = document.getElementById('kc_nonbookedcase_1').checked;

    toggleFieldRequirement(isNonBookedCaseChecked, 'tri_facilityid');

    toggleFieldRequirement(isNonBookedCaseChecked, 'tri_bookingid');

    toggleFieldRequirement(isNonBookedCaseChecked, 'tri_courtcaseid');

});

Special Scenario Approach Code:

// Function to set the required status of a field and update its visual indicator (asterisk)

function setFieldRequiredStatus(fieldIdSuffix, requiredFlag) {

    // Construct an ID for a custom style element specific to this field

    var styleElementId = "custom-style-" + fieldIdSuffix;

    // Check if a custom style element already exists and remove it if so

    var existingStyleElement = document.getElementById(styleElementId);

    if (existingStyleElement) {

        existingStyleElement.remove();

    }

    // Create a new style element to hold the custom rule

    var styleElement = document.createElement('style');

    styleElement.id = styleElementId;

    document.head.appendChild(styleElement);

    // Insert a CSS rule into the style element

    // This rule controls the display of the asterisk based on the required status

    styleElement.sheet.insertRule(`

        #${fieldIdSuffix}_label:after {

            content: ${requiredFlag ? "'*'" : "''"} !important;

            color: ${requiredFlag ? "red" : "transparent"} !important;

        }

    `, 0);

}

// Event listener for when the DOM is fully loaded

document.addEventListener("DOMContentLoaded", function() {

    // Check the status of the 'Non-Booked Case' checkbox

    var isNonBookedCaseChecked = document.getElementById('kc_nonbookedcase_1').checked;

    // Update the required status and visual indicator for each field based on the checkbox status

    setFieldRequiredStatus('tri_facilityid', !isNonBookedCaseChecked);

    setFieldRequiredStatus('tri_bookingid', !isNonBookedCaseChecked);

    setFieldRequiredStatus('tri_courtcaseid', !isNonBookedCaseChecked);

});

Implementation Details and Differences:

1. Regular Approach (toggleFieldRequirement):

   • This function is straightforward and targets scenarios where field required status can be controlled through direct DOM manipulation.
   • It updates the aria-required attribute to assist with accessibility and dynamically shows/hides a dedicated validator element (like a span with an asterisk).

2. Special Scenario Approach (setFieldRequiredStatus):

   • Developed for cases where the required field indicator (asterisk) is controlled via CSS.
   • It dynamically injects CSS rules into the document's head, manipulating the :after pseudo-element's content.
   • This method ensures that the visual indicator's presence aligns with the field's required status, even when the indicator is implemented in a non-standard way (such as through CSS).

Conclusion:

Both methods provide dynamic control over the required status of form fields. The regular approach is suitable for most standard forms, while the special scenario approach is tailored for forms where CSS plays a significant role in presenting the required status. Understanding both methods equips developers with the flexibility to handle a wide range of form behaviors in web applications.