JavaScript workaround for Hubspot multi-step form validation issue

hubspot-multi-step-form-fix.js

<script type="text/javascript">
  // 
  // JavaScript workaround to Hubspot multi-step form's issue
  // Ref. https://community.hubspot.com/t5/HubSpot-Ideas/Multi-Step-Forms-Required-Fields
  //
  // Simply add this entire <script> block to the footer of any page that contains the
  // Hubspot multi-step form. 
  //    __         __                                     ___         
  //   / /  ___   / /  _______ __  _____ ____  ___  ___  / (_)__  ___ 
  //  / _ \/ -_) / _ \/ __/ _ `/ |/ / -_) __/ / _ \/ _ \/ / / _ \/ -_)
  // /_.__/\__/ /_.__/_/  \_,_/|___/\__/_/    \___/_//_/_/_/_//_/\__/ 
  // 
  // Copyright © 2025 Axel Segebrecht (be braver Ltd)
  // 
  // Permission is hereby granted, free of charge, to any person obtaining 
  // a copy of this software and associated documentation files (the "Software"),
  // to deal in the Software without restriction, including without limitation
  // the rights to use, copy, modify, merge, publish, distribute, sublicense, 
  // and/or sell copies of the Software, and to permit persons to whom the 
  // Software is furnished to do so, subject to the following conditions:
  // 
  // The above copyright notice and this permission notice shall be included in 
  // all copies or substantial portions of the Software.
  // 
  // THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 
  // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
  // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
  // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
  // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  // 
  // 

  // Wait for DOM to be ready
  document.addEventListener('DOMContentLoaded', function() {
	function validateHubspotForm(button) {
	  // Find the parent step container
	  var stepContainer = button.closest('.hsfc-Step');
	  if (!stepContainer) return;
	  
	  // Get all required fields within this step only
	  var requiredFields = stepContainer.querySelectorAll('[aria-required="true"]');
	  
	  // Check if all required fields in this step have values
	  var allFieldsFilled = Array.prototype.every.call(requiredFields, function(field) {
		return field.value.trim() !== '';
	  });
	  
	  // Update button state
	  button.disabled = !allFieldsFilled;
	  button.style.opacity = allFieldsFilled ? '1' : '0.5';
	  button.style.cursor = allFieldsFilled ? 'pointer' : 'not-allowed';
	}
	
	// Add event listeners using event delegation
	document.addEventListener('input', function(event) {
	  if (event.target.getAttribute('aria-required') === 'true') {
		// Find the next button in the same step
		var stepContainer = event.target.closest('.hsfc-Step');
		if (stepContainer) {
		  var nextButton = stepContainer.querySelector('[data-hsfc-id="Button"]');
		  if (nextButton) {
			validateHubspotForm(nextButton);
		  }
		}
	  }
	});
	
	document.addEventListener('change', function(event) {
	  if (event.target.getAttribute('aria-required') === 'true') {
		// Find the next button in the same step
		var stepContainer = event.target.closest('.hsfc-Step');
		if (stepContainer) {
		  var nextButton = stepContainer.querySelector('[data-hsfc-id="Button"]');
		  if (nextButton) {
			validateHubspotForm(nextButton);
		  }
		}
	  }
	});
	
	// Initial validation for all steps
	function initializeAllSteps() {
	  var allButtons = document.querySelectorAll('[data-hsfc-id="Button"]');
	  allButtons.forEach(function(button) {
		validateHubspotForm(button);
	  });
	}
	
	initializeAllSteps();
	
	// Run validation when new elements are added to the DOM (for dynamically loaded forms)
	var observer = new MutationObserver(function(mutations) {
	  mutations.forEach(function(mutation) {
		if (mutation.addedNodes.length) {
		  initializeAllSteps();
		}
	  });
	});
	
	observer.observe(document.body, {
	  childList: true,
	  subtree: true
	});
  });
</script>

Added instructions on how and where to add it. Comment below with any questions or issues, and I'll do my best to answer them. If you are in a hurry, please arrange a quick call with me.