#Nr. 32 - Eingabe auf erforderlich setzen, wenn sichtbar

Erstellen Sie bedingte Formulare, indem Sie erforderliche Eingaben ein- und ausblenden.

Video Tutorial

Loom
tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

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

  // Function to check keywordif 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-keywordif-visible"]');

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

      // Check keywordif 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>

Data Attributes

1 attribute
Attribut
Value
Beschreibung
wahr
No description

How to use attributes

Add these data attributes to your HTML elements in Webflow. For example: <div data-attribute="value">

Script Info

Versionv0.1
PublishedNov 11, 2025
Last UpdatedNov 11, 2025

Need Help?

Join our Slack community for support, questions, and script requests.

Join Slack Community
Back to All Scripts

Related Scripts

More scripts in Conditional Visibility