You are viewing limited content. For full access, please sign in.

Question

Question

Hiding fields using Javascript but Form still thinks the fields are required when hidden

asked on March 27

We have some code in the Javascript tab to hide some fields under certain conditions. The fields are listed as required on the form. When they are hidden via the javascript rules, they are correctly hidden from a visual standpoint, but the form seems to still think they're there (and thus required), rendering the form not submittable.

 

When using Javascript to hide a required field, does anyone know how to make the fields unrequired when hidden?

1 0

Replies

replied on March 27

You either need to change the Validation Level of the form or reverse it so that the form field default is not required and use JavaScript to make it required based on your condition.  So instead of hiding it, show it and make it required based on the necessary conditions.

1 0
replied on March 27

That is correct. In Classic Forms, hiding a field with JavaScript does not automatically remove its required validation.

The usual fix is to make the field not required by default, then use JavaScript to both show/hide it and add/remove required at the same time.

Example:

function setRequired($field, isRequired) {
    var $inputs = $field.find('input, select, textarea')
        .not(':hidden, :button, :submit, :reset');

    if (isRequired) {
        $inputs.attr('required', 'required');
    } else {
        $inputs.removeAttr('required');
    }
}

function checkJitMessageAndSilverAutomatedMeterReadingRequested() {
    const isNewCustomer = $('input[name="Field5"]:checked').val();
    const customerType = $('#Field395').val();
    const signedMrValue = parseFloat($('#Field358').val()) || 0;

    const isOrderDetailsHardware   = $('#Field15-0').is(':checked');
    const isOrderDetailsProduction = $('#Field15-1').is(':checked');
    const isOrderDetailsMaintServ  = $('#Field15-4').is(':checked');
    const isOrderDetailsMPS        = $('#Field15-5').is(':checked');

    const shouldShow =
        (isOrderDetailsHardware || isOrderDetailsProduction || isOrderDetailsMaintServ || isOrderDetailsMPS) &&
        (
            (isNewCustomer === 'No' && customerType === 'Silver') ||
            (isNewCustomer === 'Yes' && signedMrValue < 500)
        );

    if (shouldShow) {
        $('#q487, #q488').show();
        setRequired($('#q487'), true);
        setRequired($('#q488'), true);
    } else {
        setRequired($('#q487'), false);
        setRequired($('#q488'), false);
        $('#q487, #q488').hide();
    }
}

$(document).ready(function () {
    checkJitMessageAndSilverAutomatedMeterReadingRequested();

    $('#Field395, #Field358, #Field15-0, #Field15-1, #Field15-4, #Field15-5')
        .on('change', checkJitMessageAndSilverAutomatedMeterReadingRequested);

    $('input[name="Field5"]').on('change', checkJitMessageAndSilverAutomatedMeterReadingRequested);
});

So the key is: hiding the field is not enough by itself. If the field is hidden, remove required; if it is shown again, add required back.

Also, if those fields are already marked as required in the form designer, I would remove that setting and let the script control the required state instead.

1 0
replied on March 30

Thank you Thank you!!

This does work, however, when we make the field required through Javascript, the red Asterisk is not there. Any idea how to place the red asterisk on the field?

0 0
replied on March 30

Hi, try using this code. I included a way to show the asterisk, tested, and let me know if it works for you. 

/********************************************************************************
 * HELPER: Toggles required state + red asterisk on a field container
 * $field   – jQuery object wrapping the field's container (e.g. $('#q487'))
 * isRequired – boolean
 ********************************************************************************/
function setRequired($field, isRequired) {
    var $inputs = $field.find('input, select, textarea')
        .not(':hidden, :button, :submit, :reset');

    if (isRequired) {
        $inputs.attr('required', 'required');
        // Inject red asterisk next to each label if not already present
        $field.find('label').each(function () {
            if ($(this).find('.lf-required-asterisk').length === 0) {
                $(this).append(
                    '<span class="lf-required-asterisk" aria-hidden="true" ' +
                    'style="color:red; margin-left:3px;">*</span>'
                );
            }
        });
    } else {
        $inputs.removeAttr('required');
        // Remove the injected asterisk
        $field.find('.lf-required-asterisk').remove();
    }
}

/********************************************************************************
 * RULE: JIT Message / Silver Automated Meter Readings Requested
 * Shows and makes required fields #q487 and #q488 when:
 *   - At least one Order Detail checkbox is selected (Hardware, Production,
 *     Maintenance Services, or MPS)
 *   AND one of the following is true:
 *     a) Customer is NOT new AND customer type is "Silver"
 *     b) Customer IS new AND signed MRR value is less than 500
 * Otherwise, hides the fields and removes their required state.
 ********************************************************************************/
function checkJitMessageAndSilverAutomatedMeterReadingRequested() {
    // Read current field values
    const isNewCustomer    = $('input[name="Field5"]:checked').val();
    const customerType     = $('#Field395').val();
    const signedMrValue    = parseFloat($('#Field358').val()) || 0;

    // Order Details checkboxes
    const isOrderDetailsHardware   = $('#Field15-0').is(':checked');
    const isOrderDetailsProduction = $('#Field15-1').is(':checked');
    const isOrderDetailsMaintServ  = $('#Field15-4').is(':checked');
    const isOrderDetailsMPS        = $('#Field15-5').is(':checked');

    // Determine visibility / required state
    const shouldShow =
        (isOrderDetailsHardware || isOrderDetailsProduction ||
         isOrderDetailsMaintServ || isOrderDetailsMPS) &&
        (
            (isNewCustomer === 'No'  && customerType === 'Silver') ||
            (isNewCustomer === 'Yes' && signedMrValue < 500)
        );

    if (shouldShow) {
        // Show fields first, then mark as required (so inputs are detectable)
        $('#q487, #q488').show();
        setRequired($('#q487'), true);
        setRequired($('#q488'), true);
    } else {
        // Remove required state first, then hide
        setRequired($('#q487'), false);
        setRequired($('#q488'), false);
        $('#q487, #q488').hide();
    }
}

/********************************************************************************
 * INIT: Run rule on page load and re-run on any relevant field change
 ********************************************************************************/
$(document).ready(function () {
    // Initial evaluation
    checkJitMessageAndSilverAutomatedMeterReadingRequested();

    // Re-evaluate when any controlling field changes
    $('#Field395, #Field358, #Field15-0, #Field15-1, #Field15-4, #Field15-5')
        .on('change', checkJitMessageAndSilverAutomatedMeterReadingRequested);

    $('input[name="Field5"]')
        .on('change', checkJitMessageAndSilverAutomatedMeterReadingsRequested);
});

 

1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.