How to make popup only invoke when form is actually submitted javascript

Simply define ids on your each input to validate if both fields have value in it or not. Do like this

<form action="/signup" method="post" class="register-form">
  <div>
    <div class="form-element">
      <label class="form-label" for="name">Name</label>
      <input class="form-input-text" type="text" name="name" value="" id="text1">
    </div>
   <div class="form-element">
     <label class="form-label" for="email">E-Mail</label>
     <input class="form-input-text" type="email" autocomplete="email" name="email" value="" id="text2">
   </div>
   <button class="form-button" type="submit" name="submit">Register</button>
  </div>
</form>

$(window).load(function() {

   $(".form-button").click(function() {
      let input1 = $('#text1').val();
      let input2 = $('#input2').val();
      if(input1 && input2){
         //make your http req and then after getting your response open your popup
         $('.popup').show();
      }
   });
});