Required when used with Conditional Fields

Created on 2 March 2023, over 1 year ago

Problem/Motivation

When we configure paragraph in way that the first field of paragraph is required and the rest are not required everything works fine.

However if we enable conditional fields to display paragraph only when there is any value selected from the select list it fails and you cannot save your content because it triggers to populate all fields as required because the first one is required!

It works fine when I switch to paragrahps (stable) but if I use widget "paragraphs table" it fails to continue.

When I remove dependency so paragraph field is always visible - it works again.

Attached pictures.

Anyone can help to fix that bug which triggers all fields to be mandatory if the first one is configured only. I believe it is related to this module as it works for different widget like paragrabs (stable) ?

πŸ› Bug report
Status

Active

Version

1.0

Component

Code

Created by

πŸ‡ΈπŸ‡°Slovakia coaston

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @coaston
  • πŸ‡«πŸ‡·France lazzyvn paris

    This will never work I think because the paragraphs widget do nothing, it just render the entity form standard. widget pargraphs table rewrite all html field into a table, codtional field based on field selector to hide or show, DOM is changed. why don't you write a small js script in your form, it's faster than waiting support :)

  • πŸ‡ΈπŸ‡°Slovakia coaston

    I would like to learn and see an example.

    Can you be so kind and provide any example I am using also Asset Injector module so I can put the code right there but if you can help me with some example I can adjust it to my needs.

    Thank you

  • πŸ‡ΈπŸ‡°Slovakia coaston

    Finally. Pasting code if anyone else would need the same.

    Here is my code, the first function triggers red *
    and the second one alert that field is empty.

    (function ($) {
      Drupal.behaviors.markFieldRequired = {
        attach: function(context, settings) {
          console.log("JavaScript code is loaded");
          var fieldName = "edit-field-mandatory-0-value";
          console.log("fieldName:", fieldName);
          
          $("input[name='" + fieldName + "']", context).attr("required", "required");
          $("label[for='" + fieldName + "']", context).append("<span class='form-required' title='This field is required.'>*</span>");
          
            }
      };
    })(jQuery);
    
    (function($) {
      $(document).ready(function() {
        $('#edit-submit').click(function(event) {
          // Get the value of the field.
          var field_value = $('#edit-field-mandatory-0-value').val();
    
          // Check if the field is empty.
          if (field_value === '') {
            // If the field is empty, prevent the form from being submitted.
            event.preventDefault();
            alert('Please fill in the mandatory field called "Mandalorian".');
          }
        });
      });
    })(jQuery);
    
    
Production build 0.71.5 2024