加载功能和形式

Question

我正在注册页面，我需要有4个不同的页面视图。为此，我想只更改容器中的元素。 目前我有一份必须提交的表格。 我需要检查表单中是否填写了所有必需的输入，并且我想在从一个页面切换到另一个页面时更改URL。

我该怎么办？目前js是一个尝试，我需要实现代码来检查表单和更改网址。

$(window).ready(function() {
  $("#continueBtn").click(function() {
    console.log("click");
    $("#signupBody").load("signup2.html #signupBody");
  });
});

<div id="innerContainer">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
  <script src="signup.js"></script>
  <div id="signupHeader" class="hiBorder lowBorderBg headerSize">
    <div class="verticalCenter welcomeText">
      <h1 class="title">Welcome to NotifyMe!</h1>
    </div>
    <div class="colorDots"></div>
  </div>
  <div id="signupBody" class="bodySize">
    <div id="signupDescription" class="description">
      <h1>Thanks for joining NotifyMe!</h1>
      <p>Once registered you'll have access to amazing features that will bring your inspection management to a new level!</p>
    </div>
    <form>
      <div id="signupData">
        <label>Email</label>
        <input id="userID" type="text" autofocus required>

        <label>Password</label>
        <input id="passwd" type="password" required>

        <label>Confirm Password</label>
        <input id="passwdcheck" type="password" required>

        <div id="conditions">
          <p>
            <input id="checkToggle" style="width:auto;" type="checkbox" required name="Terms and Conditions" /> By continuing, you agree to the <a href="">Terms of Service</a> and the <a href="">Privacy Policy</a>.
          </p>
        </div>
      </div>
      <div id="signupBtn">
        <button type="submit" class="btn" value="Continue" id="continueBtn">Continue</button>
      </div>
    </form>
  </div>
</div>