0

Using Drupal 7.

I'm trying to toggle required field based on the click of a radio button.

I already tried the proposed solution in this post but it did not work.

Here is my code:

        $(context).find('.field-name-field-stop-displaying-after').hide();
        $(context).find('.field-name-field-stop-displaying-after').removeClass('required');
        $(context).find("input[name='field_status[und]']").click(function() {
          var radioSelect = $(this).val();
          if (radioSelect == 0) {
            $(context).find('.field-name-field-stop-displaying-after').hide();
            $(context).find('.field-name-field-stop-displaying-after').removeClass('required');
          } else {
            $(context).find('.field-name-field-stop-displaying-after').show();
            $(context).find('.field-name-field-stop-displaying-after').addClass('required');
          }
        });

Note that the hide/show toggle works properly.

For the required class, I am targeting the element that the system targets when I set it as required in configuration. The required class is toggled on the element, but does not actually toggle the requirement. In other words, if the field is hidden, it should not be required, but it remains required. The only difference I can see with the system setting is that it adds a legend element that describes the field as required.

What am I missing here? How can I toggle the requirement of the field?

7
  • 2
    This might be easier to do using the states property in Form aPI
    – Kevin
    Oct 10, 2018 at 15:28
  • @Kevin I’m checking out some examples and that doesn’t seem any less complex. Do you have a specific idea in mind?
    – lane
    Oct 10, 2018 at 15:39
  • 2
    The required status is server-side, not client side. You need to use AJAX to achieve this, as the backend form will need to be informed of the decision to change that required status for one or more elements. The state API won't help, that's just client side too
    – Clive
    Oct 10, 2018 at 15:56
  • I've done this in the past by leaving the field NOT required; using the states property in Form API and then just enforcing the conditional required-ness in a form submit handler.
    – bleen
    Oct 10, 2018 at 18:48
  • 2
    Possible duplicate of How to make a form required with states?
    – leymannx
    Oct 10, 2018 at 19:47

1 Answer 1

0

In my case, I actually didn't need server-side validation; I just needed validation to serve as a reminder to fill out an exposed field. Instead, I added field-level validation with required.

$(context).find('.field-name-field-stop-displaying-after').hide();
$(context).find("input[name='field_stop_displaying_after[und][0][value][date]']").prop('required',false);
$(context).find("input[name='field_status[und]']").click(function() {
    var radioSelect = $(this).val();
    if (radioSelect == 0) {
        $(context).find('.field-name-field-stop-displaying-after').hide();
        $(context).find("input[name='field_stop_displaying_after[und][0][value][date]']").prop('required',false);
    } else {
        $(context).find('.field-name-field-stop-displaying-after').show();
        $(context).find("input[name='field_stop_displaying_after[und][0][value][date]']").prop('required',true);
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.