Mailchimp inline form validation not working for JS loaded HTML

I'm trying to create a custom Mailchimp popup. I'm using their embeddable form code but loading the form HTML onto the page on a button click using JS (or jQuery) from a separate file. I don't want the user to be redirected to Mailchimp's Thank You page on completion of the form. When I don't try to load the form HTML separately, and have it on the main page, the inline validation is working and you're not redirected to a Mailchimp page. But when I load the same form code from another file by either JS or jQuery, the inline validation does not work and you're redirected to a Mailchimp page. Is there a way to load the form HTML from another file and avoid the redirect?

I was initially using jQuery and found a lot of articles suggesting that the issue was a conflict between Mailchimp and jQuery, but the recommended fixes didn't seem to work, and switching back to just JS does not fix it. I've tried a lot of different things but am fairly new to JS & jQuery so could be missing something obvious - apologies in advance!

Here's the HTML I'm using for the jQuery version:

<!-- Form to be loaded into here on button click -->
<div id="mailchimp-popup-outer"></div>

<div class="mailchimp-popup-button">
   <h4>Subscribe to our newsletter:</h4>
   <button id="popup">Subscribe</button>
</div>

Here's the external form file - form.html (basically just the Mailchimp embed default, with a few edits):

<div id="insert-me">

    <!-- Subscribe popup -->
    <div class="mailchimp-popup-wrapper" id="form-popup">
       <div class="mailchimp-popup">
          <div id="mc_embed_signup">
             <form action="//skillsyouneed.us10.list-manage.com/subscribe/post?u=a868895a9768ad4ae0ec3c321&amp;id=b129192227" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                <img class="close-btn" id="close-popup" src="images/close-icon-3.png">
                   <h4>Subscribe to our Newsletter</h4>
                   <hr>
                   <div class="mc-field-group">
                      <label for="mce-NAME">First name  <span class="asterisk">*</span></label>
                      <input type="text" value="" name="NAME" class="required" id="mce-NAME">
                    </div>
                    <div id="mc_embed_signup_scroll">
                       <div class="mc-field-group">
                          <label for="mce-EMAIL">Email address  <span class="asterisk">*</span></label>
                          <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
                       </div>
                    <div id="mce-responses" class="clear">
                       <div class="response" id="mce-error-response" style="display:none"></div>
                       <div class="response" id="mce-success-response" style="display:none"></div>
                    </div>
                    <p class="text-success"><small>We <strong>will never</strong> share your email address or name with anybody else, you can unsubscribe from our newsletter at any time.</small></p><br>
                    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                    <div style="position: absolute; left: -5000px;"><input type="text" name="b_a868895a9768ad4ae0ec3c321_b129192227" tabindex="-1" value=""></div>
                    <div class="text_align_center"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" onclick ="confirm_show()"></div>
                 </div>
              </form>
           </div>
           <!-- mc-validate -->
           <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='NAME';ftypes[1]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
        </div>
     </div>                

     <!-- Confirmation Popup -->
     <div class="mailchimp-popup-wrapper" id="confirm-popup">
        <div class="mailchimp-popup">
           <div id="confirm-popup-inner">
              <img class="close-btn" id="close-confirm" src="images/close-icon-3.png">
               <h4>Thanks!</h4>
               <hr>
               <div id="confirm-text">Thanks for subscribing. You will receive an email with instructions on how to confirm your subscription.</div>
           </div>
        </div>
     </div>                

</div>

And here's the jQuery (in custom.js):

// Also tried avoiding using $ in case of conflict with Mailchimp's variables as suggested by other articles, to no avail.

(function($){ 
   $(document).on("click", "#popup", function () { 
      $( "#mailchimp-popup-outer" ).load( "form.html #insert-me", function() {
         $( "#form-popup" ).addClass( "display-block" );
      });
      event.preventDefault();
      return false;
   });

   $(document).on("click", "#close-popup", function () { 
      $( "#form-popup" ).removeClass( "display-block" ).addClass( "display-none" );
   });

   $(document).on("click", "#mc-embedded-subscribe", function () { 
      $( "#form-popup" ).removeClass( "display-block" ).addClass( "display-none" );
      $( "#confirm-popup" ).addClass( "display-block" );
   });

   $(document).on("click", "#close-confirm", function () { 
      $( "#confirm-popup" ).removeClass( "display-block" ).addClass( "display-none" );
   });

})(jQuery);                 

I also tried switching to JS in case it was a jQuery issue somehow, which is this (with some small changes to the HTML to put in the onclick functions etc):

// Display Popup Form
   function div_show() {
      document.getElementById('form-popup').style.display = "block";
   }
// Hide Popup Form
   function div_hide() {
      document.getElementById('form-popup').style.display = "none";
   }
// Display Popup Confirmation
   function confirm_show() {
      document.getElementById('form-popup').style.display = "none";
      document.getElementById('confirm-popup').style.display = "block";
   }
// Hide Popup Confirmation
   function confirm_hide() {
      document.getElementById('confirm-popup').style.display = "none";
   }
// Load form
   function loadPage(href) {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET", href, false);
      xmlhttp.send();
      return xmlhttp.responseText;
   }
   function subscribe_click() {
      document.getElementById('mailchimp-popup-outer').innerHTML = loadPage("form.html");
      div_show();
   }

What's baffling me is that if I put the form HTML in the page directly, instead of loading it in, then the popup works as hoped with inline validation and not directing users away from the site. It seems to be something about the process of loading it in which is causing the issue - I think?