https://require-input-if-visible.webflow.io/

1<!DOCTYPE html><!-- This site was created in Webflow. https://www.webflow.com --><!-- Last Published: Wed Jun 07 2023 14:31:05 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="require-input-if-visible.webflow.io" data-wf-page="64808ce649064875ae75ad31" data-wf-site="64808ce649064875ae75ad33"><head><meta charset="utf-8"/><title>Set Field to Required when Visible</title><meta content="width=device-width, initial-scale=1" name="viewport"/><meta content="Webflow" name="generator"/><link href="https://assets.website-files.com/64808ce649064875ae75ad33/css/require-input-if-visible.webflow.0969bf93e.css" rel="stylesheet" type="text/css"/><link href="https://fonts.googleapis.com" rel="preconnect"/><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"/>

1<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>

1<script type="text/javascript">WebFont.load({  google: {    families: ["Figtree:regular,700"]  }});</script>

1<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>

1<link href="https://assets.website-files.com/img/favicon.ico" rel="shortcut icon" type="image/x-icon"/><link href="https://assets.website-files.com/img/webclip.png" rel="apple-touch-icon"/></head><body><div class="ms-page-wrapper"><div id="w-node-_79b543de-7f8d-fcbd-84b0-2861ea95c1e6-ae75ad31" class="border-wrap w-form"><form id="wf-form-Contact-Form" name="wf-form-Contact-Form" data-name="Contact Form" method="get" class="form-inner"><div class="flex-row-outer"><div class="input-wrapper _15p-right"><label for="First-Name-3" class="input-label">First Name</label><input type="text" class="input w-input" maxlength="256" name="First-Name-3" data-name="First Name 3" placeholder="e.g. Howard" id="First-Name-3" required=""/></div><div class="input-wrapper"><label for="Last-Name-3" class="input-label">Last Name</label><input type="text" class="input w-input" maxlength="256" name="Last-Name-3" data-name="Last Name 3" placeholder="e.g. Thurman" id="Last-Name-3" required=""/></div></div><div class="flex-row-outer"><div class="input-wrapper"><label for="Email-4" class="input-label">Email</label><input type="email" class="input w-input" maxlength="256" name="Email-4" data-name="Email 4" placeholder="e.g. [email protected]" id="Email-4" required=""/></div></div><div class="input-wrapper"><div class="input-label is-tabs">How can we help you?</div></div><div class="input-wrapper"><div data-current="General" data-easing="ease" data-duration-in="300" data-duration-out="100" class="ms-100 w-tabs"><div class="ms-tab-menu-2 w-tab-menu"><a data-w-tab="General" class="ms-tab w-inline-block w-tab-link w--current"><div>General</div></a><a data-w-tab="Support" class="ms-tab w-inline-block w-tab-link"><div>Support</div></a><a data-w-tab="Partner" class="ms-tab w-inline-block w-tab-link"><div>Partner</div></a><a data-w-tab="Sales" class="ms-tab w-inline-block w-tab-link"><div>Sales</div></a></div><div class="w-tab-content"><div data-w-tab="General" class="w-tab-pane w--tab-active"><div><div class="input-wrapper"><label for="General-Message" class="input-label">Your message</label><textarea class="input w-input" maxlength="5000" name="General-Message" data-name="General Message" placeholder="" ms-code="required-if-visible" id="General-Message" required=""></textarea></div></div></div><div data-w-tab="Support" class="w-tab-pane"><div><div class="input-wrapper"><div class="input-label">Select One</div><select id="Select" name="Select" data-name="Select" ms-code="required-if-visible" class="input w-select"><option value="">Select one...</option><option value="First">First choice</option><option value="Second">Second choice</option><option value="Third">Third choice</option></select></div><div class="input-wrapper"><label for="Support-Message" class="input-label">Please describe your issue</label><textarea class="input w-input" maxlength="5000" name="Support-Message" data-name="Support Message" placeholder="" ms-code="required-if-visible" id="Support-Message"></textarea></div><div class="input-wrapper"><label for="Phone-3" class="input-label">Phone</label><input type="tel" class="input w-input" maxlength="256" name="Support-Phone" data-name="Support Phone" placeholder="e.g. +1 (234) 567-8910" ms-code="required-if-visible" id="Support-Phone"/></div></div></div><div data-w-tab="Partner" class="w-tab-pane"><div><div class="input-wrapper"><label for="Partner-Message" class="input-label">How should we work together?</label><textarea class="input w-input" maxlength="5000" name="Partner-Message" data-name="Partner Message" placeholder="" ms-code="required-if-visible" id="Partner-Message"></textarea></div><div class="input-wrapper"><label for="Partner-Phone" class="input-label">Phone</label><input type="tel" class="input w-input" maxlength="256" name="Partner-Phone" data-name="Partner Phone" placeholder="e.g. +1 (234) 567-8910" ms-code="required-if-visible" id="Partner-Phone"/></div></div></div><div data-w-tab="Sales" class="w-tab-pane"><div><div class="input-wrapper"><label for="Sales-Phone" class="input-label">Phone</label><input type="tel" class="input w-input" maxlength="256" name="Sales-Phone" data-name="Sales Phone" placeholder="e.g. +1 (234) 567-8910" ms-code="required-if-visible" id="Sales-Phone"/></div></div></div></div></div></div><div class="spacer-xs"></div><input type="submit" value="Submit" data-wait="Please wait..." class="button in-form w-button"/></form><div class="success-message w-form-done"><div>Thank you! Your submission has been received!</div></div><div class="w-form-fail"><div>Oops! Something went wrong while submitting the form.</div></div></div><div id="w-node-_79b543de-7f8d-fcbd-84b0-2861ea95c221-ae75ad31" class="content-wrap"><h2 class="h2">Require Fields if They are Visible</h2><div class="spacer-m"></div><p class="paragraph">I&#x27;m using tabs to control which questions are visible in the form. There&#x27;s some code in the footer of the page which checks to see if the input is visible. <br/><br/>If yes, then it&#x27;s required. If hidden, then it&#x27;s not required. Conditional inputs have the attribute <span class="attribute">ms-code=&quot;required-if-visible&quot;</span>.</p><div class="spacer-l"></div>

1<div class="w-layout-grid _1-2-grid"><a href="#" class="icon-text-point w-inline-block"><div class="icon dark w-embed"><svg width="420" height="420" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2<path d="M18.364 17.3639L12 23.7279L5.636 17.3639C4.37734 16.1052 3.52019 14.5016 3.17293 12.7558C2.82567 11.0099 3.00391 9.20035 3.6851 7.55582C4.36629 5.91129 5.51984 4.50569 6.99988 3.51677C8.47992 2.52784 10.22 2 12 2C13.78 2 15.5201 2.52784 17.0001 3.51677C18.4802 4.50569 19.6337 5.91129 20.3149 7.55582C20.9961 9.20035 21.1743 11.0099 20.8271 12.7558C20.4798 14.5016 19.6227 16.1052 18.364 17.3639V17.3639ZM12 12.9999C12.5304 12.9999 13.0391 12.7892 13.4142 12.4141C13.7893 12.0391 14 11.5304 14 10.9999C14 10.4695 13.7893 9.96078 13.4142 9.58571C13.0391 9.21064 12.5304 8.99992 12 8.99992C11.4696 8.99992 10.9609 9.21064 10.5858 9.58571C10.2107 9.96078 10 10.4695 10 10.9999C10 11.5304 10.2107 12.0391 10.5858 12.4141C10.9609 12.7892 11.4696 12.9999 12 12.9999Z" fill="currentColor"/>
3</svg>
4</div><div>45 Green Street, USA</div></a><a href="#" class="icon-text-point w-inline-block"><div class="icon dark w-embed"><svg width="420" height="420" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
5<path d="M21 16.42V19.956C21.0001 20.2092 20.9042 20.453 20.7316 20.6382C20.559 20.8234 20.3226 20.9363 20.07 20.954C19.633 20.984 19.276 21 19 21C10.163 21 3 13.837 3 5C3 4.724 3.015 4.367 3.046 3.93C3.06372 3.67744 3.17658 3.44101 3.3618 3.26841C3.54703 3.09581 3.79082 2.99989 4.044 3H7.58C7.70404 2.99987 7.8237 3.04586 7.91573 3.12902C8.00776 3.21218 8.0656 3.32658 8.078 3.45C8.101 3.68 8.122 3.863 8.142 4.002C8.34073 5.38892 8.748 6.73783 9.35 8.003C9.445 8.203 9.383 8.442 9.203 8.57L7.045 10.112C8.36445 13.1865 10.8145 15.6365 13.889 16.956L15.429 14.802C15.4919 14.714 15.5838 14.6509 15.6885 14.6237C15.7932 14.5964 15.9042 14.6068 16.002 14.653C17.267 15.2539 18.6156 15.6601 20.002 15.858C20.141 15.878 20.324 15.9 20.552 15.922C20.6752 15.9346 20.7894 15.9926 20.8724 16.0846C20.9553 16.1766 21.0012 16.2961 21.001 16.42H21Z" fill="currentColor"/>
6</svg>
7</div><div>+1 (234) 567-8910</div></a></div></div></div><div class="delete-me"><div><div class="ms-iframe"><div class="ms-iframe-embed w-embed w-iframe"><iframe id="memberstack-iframe" src="https://memberstack-embeds.webflow.io/branding?ref=blank" sandbox="allow-same-origin allow-scripts allow-forms allow-top-navigation allow-popups"></iframe>
8
9
10<style>
11iframe {
12		height: 100%;
13    width: 100%;
14    border-width: 0px;
15    border-style: inset;
16    border-color: initial;
17    border-image: initial;
18    border: 0;
19    border: none;
20    min-height: 0px;
21    min-width: 0px;
22    background: transparent;
23}
24
25* {
26    box-sizing: border-box;
27}
28
29/* width */
30::-webkit-scrollbar {

31    height: 0px;
32    width: 0px;
33    background-color:;
34}
35
36/* Track */
37::-webkit-scrollbar-track {
38    background: transparent; 
39}
40
41/* Handle */
42::-webkit-scrollbar-thumb {
43    background: transparent; 
44}
45
46/* Handle on hover */
47::-webkit-scrollbar-thumb:hover {
48    background: transparent; 
49}
50   
51</style></div><div class="hidden-embed w-embed w-script">

51<script>
52  // get the domain name of the page where the iframe is embedded
53  var domain = window.location.hostname;
54
55  // get the iframe element
56  var iframe = document.getElementById('memberstack-iframe');
57
58  // get the src attribute value of the iframe
59  var src = iframe.getAttribute('src');
60
61  // replace the ref value in the src with the domain name
62  src = src.replace('ref=blank', 'ref=' + domain);
63
64  // set the new src value to the iframe
65  iframe.setAttribute('src', src);
66</script>

66</div></div><div class="ms-iframe-footer-embed-3 w-embed w-iframe"><iframe src="https://memberstack-embeds.webflow.io/footer" sandbox="allow-same-origin allow-scripts allow-forms allow-top-navigation allow-popups"></iframe>
67
68
69<style>
70iframe {
71		height: 100%;
72    width: 100%;
73    border-width: 0px;
74    border-style: inset;
75    border-color: initial;
76    border-image: initial;
77    border: 0;
78    border: none;
79    min-height: 0px;
80    min-width: 0px;
81    background: transparent;
82}
83
84* {
85    box-sizing: border-box;
86}
87
88/* width */
89::-webkit-scrollbar {
90    height: 0px;
91    width: 0px;
92    background-color:;
93}
94
95/* Track */
96::-webkit-scrollbar-track {
97    background: transparent; 
98}
99
100/* Handle */
101::-webkit-scrollbar-thumb {
102    background: transparent; 
103}
104
105/* Handle on hover */
106::-webkit-scrollbar-thumb:hover {
107    background: transparent; 
108}
109   
110</style></div></div></div>

110<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=64808ce649064875ae75ad33" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

110<script src="https://assets.website-files.com/64808ce649064875ae75ad33/js/webflow.89ce666f3.js" type="text/javascript"></script>

110<script>
111document.addEventListener("DOMContentLoaded", function() {
112
113  // Function to check if an element is visible
114  function isElementVisible(element) {
115    return element.offsetParent !== null;
116  }
117
118  // Every time the user clicks on the document
119  document.addEventListener('click', function() {
120
121    // Get all inputs with the ms-code attribute
122    const inputs = document.querySelectorAll('[ms-code="required-if-visible"]');
123
124    // Loop through each input
125    inputs.forEach(function(input) {
126
127      // Check if the input or its parent is visible
128      if (isElementVisible(input)) {
129
130        // If the input is visible, add the required attribute
131        input.required = true;
132      } else {
133
134        // If the input is not visible, remove the required attribute
135        input.required = false;
136      }
137    });
138  });
139});
140</script>

140</body></html>