Answer by Just code for Validation and button problem before next page

function page1() {  var name = document.forms["form1"]["name"].value  var email = document.forms["form1"]["email"].value  if (name == "" || !isNaN(name)) {    alert("Please enter correct name");    return false;  }  if (email.match(/^[\w\d._-]+@[\w\d.-]+\.[\w\d]{2,6}$/)) {  } else {    alert("Please enter correct email");    return false;  }  return true;}function page2() {  var phone = document.forms["form1"]["phone"].value  var address = document.forms["form1"]["address"].value  if (address == "" || !isNaN(address)) {    alert("Please enter correct address");    return false;  }  if (phone == "" || phone.length <= 9 || phone.length > 13 || isNaN(phone)) {    alert("Please enter correct phone");    return false;  }  return true;}function page3() {  var password = document.forms["form1"]["password"].value  var password2 = document.forms["form1"]["password"].value  if (password.match(/((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%]).{8,15})/)) {  } else {    alert("Please enter correct password");    return false;  }  if (password1 != password2) {    alert("Password and Re-enter Password was not same");    return false;  }  return true;}$(document).ready(function() {  $(".form-wrapper .button1").click(function() {    if ($(this).hasClass('page1')) {      if (!page1()) {        return;      }    }    else if ($(this).hasClass('page2')) {      if (!page2()) {        return;      }    }    else if ($(this).hasClass('page3')) {      if (!page3()) {        return;      }    }    $(this).closest("form1").find("input[type=text], input[type=password]").val("");    var button = $(this);    var currentSection = button.parents(".section");    var currentSectionIndex = currentSection.index();    var headerSection = $('.steps li').eq(currentSectionIndex);    currentSection.removeClass("is-active").next().addClass("is-active");    headerSection.removeClass("is-active").next().addClass("is-active");    $(".form-wrapper").submit(function(e) {      e.preventDefault();      submit = $(this);    });    if (currentSectionIndex === 3) {      $(document).find(".form-wrapper .section").first().addClass("is-active");      $(document).find(".steps li").first().addClass("is-active");    }  });});$(document).ready(function() {  $(".form-wrapper .button2").click(function() {    var button = $(this);    var currentSection = button.parents(".section");    var currentSectionIndex = currentSection.index();    var headerSection = $('.steps li').eq(currentSectionIndex);    currentSection.removeClass("is-active").prev().addClass("is-active");    headerSection.removeClass("is-active").prev().addClass("is-active");    $(".form-wrapper").submit(function(e) {      e.preventDefault();      this.submit();    });    if (currentSectionIndex === 3) {      $(document).find(".form-wrapper .section").first().addClass("is-active");      $(document).find(".steps li").first().addClass("is-active");    }  });});

html,body {  width: 100%;  height: 100%;  margin: 0;  padding: 0;  font-family: 'Open Sans', sans-serif;  background-color: #fff;}h1,h2,h3,h4,h5,h6 {  color: #fff;  font-weight: 200;}a {  text-decoration: none;}p,li,a {  font-size: 14px;}fieldset {  margin: 0;  padding: 0;  border: none;  color: #fff;}/* GRID */.twelve {  width: 100%;}.eleven {  width: 91.53%;}.ten {  width: 83.06%;}.nine {  width: 74.6%;}.eight {  width: 66.13%;}.seven {  width: 57.66%;}.six {  width: 49.2%;}.five {  width: 40.73%;}.four {  width: 32.26%;}.three {  width: 23.8%;}.two {  width: 15.33%;}.one {  width: 6.866%;}/* COLUMNS */.col {  display: block;  float: left;  margin: 0 0 0 1.6%;}.col:first-of-type {  margin-left: 0;}.container {  width: 100%;  max-width: 700px;  margin: 0 auto;  position: relative;}.row {  padding: 20px 0;}/* CLEARFIX */.cf:before,.cf:after {  content: "";  display: table;}.cf:after {  clear: both;}.cf {  *zoom: 1;}.wrapper {  width: 100%;  margin: 30px 0;}/* STEPS */.steps {  list-style-type: none;  margin: 0;  padding: 0;  background-color: #000;  text-align: center;}.steps li {  display: inline-block;  margin: 20px;  color: #ccc;  padding-bottom: 5px;}.steps li.is-active {  border-bottom: 1px solid #fff;  color: #fff;}/* FORM */.form-wrapper .section {  padding: 0px 20px 30px 20px;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  background-color: #000;  opacity: 0;  -webkit-transform: scale(1, 0);  -ms-transform: scale(1, 0);  -o-transform: scale(1, 0);  transform: scale(1, 0);  -webkit-transform-origin: top center;  -moz-transform-origin: top center;  -ms-transform-origin: top center;  -o-transform-origin: top center;  transform-origin: top center;  -webkit-transition: all 0.5s ease-in-out;  -o-transition: all 0.5s ease-in-out;  transition: all 0.5s ease-in-out;  text-align: center;  position: absolute;  width: 100%;  min-height: 300px}.form-wrapper .section h3 {  margin-bottom: 30px;}.form-wrapper .section.is-active {  opacity: 1;  -webkit-transform: scale(1, 1);  -ms-transform: scale(1, 1);  -o-transform: scale(1, 1);  transform: scale(1, 1);}.form-wrapper .button1,.form-wrapper .submit {  background-color: #fff;  display: inline-block;  padding: 8px 30px;  color: #000;  cursor: pointer;  font-size: 14px !important;  font-family: 'Open Sans', sans-serif !important;  position: absolute;  right: 20px;  bottom: 20px;}.form-wrapper .button2 {  background-color: #fff;  display: inline-block;  padding: 8px 30px;  color: #000;  cursor: pointer;  font-size: 14px !important;  font-family: 'Open Sans', sans-serif !important;  position: absolute;  left: 20px;  bottom: 20px;}.form-wrapper .submit {  border: none;  outline: none;  -webkit-box-sizing: content-box;  -moz-box-sizing: content-box;  box-sizing: content-box;  -webkit-appearance: none;  -moz-appearance: none;  appearance: none;}.form-wrapper input[type="text"],.form-wrapper input[type="password"] {  display: block;  padding: 10px;  margin: 10px auto;  background-color: #f1f1f1;  border: none;  width: 50%;  outline: none;  font-size: 14px !important;  font-family: 'Open Sans', sans-serif !important;}

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><div class="container"><div class="wrapper"><ul class="steps"><li class="is-active">Step 1</li><li>Step 2</li><li>Step 3</li></ul><form class="form-wrapper" id="form1" onsumbit="return submit1()"><fieldset class="section is-active"><h3>Your Details</h3><input type="text" name="name" id="name" placeholder="Name"><input type="text" name="email" id="email" placeholder="Email"><input class="button1 page1" type="button" value="Next"></fieldset><fieldset class="section"><h3>other Details</h3><input type="text" name="phone" id="phone" placeholder="Phone"><input type="text" name="address" id="address" placeholder="address"><input class="button2" type="button" value="Previous"><input class="button1 page2" type="button" value="Next" onclick="return page2()"></fieldset><fieldset class="section"><h3>Choose a Password</h3><input type="password" name="password" id="password" placeholder="Password"><input type="password" name="password2" id="password2" placeholder="Re-enter Password"><input class="button2" type="button" value="Previous"><input class="submit button1 page3" type="submit" value="Sign Up" onclick="return page3()"></fieldset><fieldset class="section"><h3>Account Created!</h3><p>Your account has now been created.</p><div class="button1">Reset Form</div></fieldset></form></div></div>