Set form field to required, when shown

Design help Custom code
1

Hi guys

I’m having issues with my form on the page below.

I have to form field that are shown or hidden depending on if a radio button is selected or not.

e.g.
if a user toggles the first selection ‘Sprint Camp 2. oct 2021’ than it shows a different field Jahrgang (age) than when i toggle the second selection ‘Sprint Camp 3. oct 2021’.

I need to do that because depending on the radio button different ages are allowed to join the event.

My problem is that the field is required. If i set both fields, also the hidden one, to required, the form can’t be submitted because of the missing value.

My question: is there a custom code that i can add which sets the shown field to required and the not shown one to not required?

Sorry, it’s kind of hard to explain but i hope it works :slight_smile:

Here is my site Read-Only: https://preview.webflow.com/preview/visana-camps?utm_medium=preview_link&utm_source=designer&utm_content=visana-camps&preview=079fd5b4dd367266002218eb0bfa99db&workflow=preview

2

Hi, I need exactly the same. Did you find a solution?

1 Like
3

I found a solution! With the help of ChatGPT I created a demo project and created a quick tutorial video here.

TLDR: We want to make an input field required only when it becomes visible. The visibility of the field is controlled by the display style of a parent element.

We need a way to check if the input field is visible on the page and, if so, add the required attribute. We’ll check any input with the attribute ms-code=“required-if-visible”

Here the JavaScript you’ll need to add before the closing tag:


<!-- 💙 MEMBERSCRIPT #32 v0.1 💙 REQUIRE INPUT IF VISIBLE -->
<script>
document.addEventListener("DOMContentLoaded", function() {

  // Function to check if an element is visible
  function isElementVisible(element) {
    return element.offsetParent !== null;
  }

  // Every time the user clicks on the document
  document.addEventListener('click', function() {

    // Get all inputs with the ms-code attribute
    const inputs = document.querySelectorAll('[ms-code="required-if-visible"]');

    // Loop through each input
    inputs.forEach(function(input) {

      // Check if the input or its parent is visible
      if (isElementVisible(input)) {

        // If the input is visible, add the required attribute
        input.required = true;
      } else {

        // If the input is not visible, remove the required attribute
        input.required = false;
      }
    });
  });
});
</script>

This code will check the visibility of the input fields every time the user clicks anywhere on the document. You may need to adjust this if you know the specific events that could cause the parent element to change visibility.

In addition, please note that the isElementVisible function checks whether the display CSS property is none. If you’re using another method to hide the elements (like opacity or visibility), you would need to adjust this function accordingly.

I hope this helps :grin:

1 Like
4

Hey :wave: I had the exact same issue and it works fine, thank you.

To optimize it a little more, I attached the click listener to the form only, which prevents triggering this field looping function when clicking anywhere on the document. Here’s the code :

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Function to check if an element is visible
    function isElementVisible(element) {
      return element.offsetParent !== null;
    }

    // Get the form element by its id
    const formElement = document.getElementById('YOUR_FORM_ID');

    if (formElement) {
      // Attach a click event listener to the form
      formElement.addEventListener('click', function(event) {
        // Get all inputs with the custom-code attribute
        const inputs = document.querySelectorAll('[custom_attr="required-if-visible"]');

        // Loop through each input
        inputs.forEach(function(input) {
          // Check if the input or its parent is visible
          if (isElementVisible(input)) {
            // If the input is visible, add the required attribute
            input.required = true;
          } else {
            // If the input is not visible, remove the required attribute
            input.required = false;
          }
        });
      });
    }
  });
</script>
1 Like
5

Thanks Raph, works perfectly. Cheers.

1 Like