时间戳

首页 > 解决方案 > 下一页前的验证和按钮问题

javascript - 下一页前的验证和按钮问题

问题描述

我正在创建一个多表单。

当我没有输入任何文字并单击下一步按钮时，系统有显示功能验证，但它也会自动进入下一页。

所以，我需要做的是检测我何时输入了错误的格式或空字符串，因此系统将进行验证并且不会自动转到下一页。

最后，如何单击提交按钮让系统保存我所有的表单数据？

这是我的脚本：

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;
  }
}

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() {
  $(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" type="button" value="Next" onclick="return page1()">
      </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" 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" 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>

标签： javascripthtmlcss

解决方案

您不需要在 page1、page2、page3 的按钮上发生 onclick 事件。

删除onclick="return page1()"调用函数

只需使用一个事件 onclick 它应该可以工作，添加类来检查验证，这就是我所做的。

if ($(this).hasClass('page1')) {
      if (!page1()) {
        return;
      }
    }
    else if ($(this).hasClass('page2')) {
      if (!page2()) {
        return;
      }
    }
    else if ($(this).hasClass('page3')) {
      if (!page3()) {
        return;
      }
    }


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>

通过这样做，您将能够轻松地应用您的代码，并且您不必找到多个要出现的地方。

推荐阅读