Question

我无法验证多步表单 - 我希望对每个字段进行验证，而不是现在验证字段集

我的代码

＆＃13;

function show_next(id, nextid, bar) {
  var ele = document.getElementById(id).getElementsByTagName("input");
  var error = 0;
  for (var i = 0; i < ele.length; i++) {
    if (ele[i].type == "text" && ele[i].value == "") {
      error++;
    }
  }

  if (error == 0) {
    document.getElementById("account_details").style.display = "none";
    document.getElementById("user_details").style.display = "none";
    document.getElementById("qualification").style.display = "none";
    $("#" + nextid).fadeIn();
    document.getElementById(bar).style.backgroundColor = "#38610B";
  } else {
    alert("Fill All The details");
  }
}

function show_prev(previd, bar) {
  document.getElementById("account_details").style.display = "none";
  document.getElementById("user_details").style.display = "none";
  document.getElementById("qualification").style.display = "none";
  $("#" + previd).fadeIn();
  document.getElementById(bar).style.backgroundColor = "#D8D8D8";
}

＆＃13;

body {
  margin: 0 auto;
  padding: 0;
  text-align: center;
  background-color: #D8D8D8;
}

#wrapper {
  width: 995px;
  padding: 0px;
  margin: 0px auto;
  font-family: helvetica;
  position: relative;
}

#wrapper .baricon {
  display: inline-block;
  border-radius: 100%;
  padding: 12px;
  background-color: #38610B;
  color: white;
}

#wrapper .progress_bar {
  width: 200px;
  height: 5px;
  border-radius: 20px;
  background-color: #D8D8D8;
  display: inline-block;
}

#wrapper form div {
  margin-left: 340px;
  padding: 10px;
  box-sizing: border-box;
  width: 300px;
  margin-top: 50px;
  background-color: #585858;
}

#wrapper form div p {
  color: #F2F2F2;
  margin: 0px;
  margin-top: 10px;
  font-weight: bold;
}

#wrapper form div .form_head {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 30px;
}

#wrapper form div input[type="text"] {
  width: 200px;
  height: 40px;
  padding: 5px;
  border-radius: 5px;
  border: none;
  margin-top: 10px;
}

#wrapper form div input[type="button"],
input[type="submit"] {
  width: 80px;
  height: 40px;
  border-radius: 5px;
  border: 2px solid white;
  background: none;
  color: white;
  margin: 5px;
  margin-top: 10px;
}

#user_details,
#qualification {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="wrapper">
  <br>
  <span class='baricon'>1</span>
  <span id="bar1" class='progress_bar'></span>
  <span class='baricon'>2</span>
  <span id="bar2" class='progress_bar'></span>
  <span class='baricon'>3</span>

  <form method="post" action="">
    <div id="account_details">
      <p class='form_head'>Account Details</p>
      <p>Email Address</p>
      <input type="text" placeholder='Email Address'>
      <p>Password</p>
      <input type="text" placeholder='Password'>
      <br>
      <input type="button" value="Next" onclick="show_next('account_details','user_details','bar1');">
    </div>

    <div id="user_details">
      <p class='form_head'>User Details</p>
      <p>First Name</p>
      <input type="text" placeholder='First Name'>
      <p>Last Name</p>
      <input type="text" placeholder='Last Name'>
      <p>Gender</p>
      <input type="text" placeholder='Gender'>
      <br>
      <input type="button" value="Previous" onclick="show_prev('account_details','bar1');">
      <input type="button" value="Next" onclick="show_next('user_details','qualification','bar2');">
    </div>

    <div id="qualification">
      <p class='form_head'>Qualification</p>
      <p>Qualification</p>
      <input type="text" placeholder='Qualification'>
      <p>Hobbies</p>
      <input type="text" placeholder='Hobbies'>
      <br>
      <input type="button" value="Previous" onclick="show_prev('user_details','bar2');">
      <input type="Submit" value="Submit">
    </div>
  </form>

</div>

＆＃13;

Answer 1

如果有错误，这是一个不会转到下一页的版本让我知道你的想法

我添加了两个验证。你可以改变其余部分。代码大大简化了

body {
  margin: 0 auto;
  padding: 0;
  text-align: center;
  background-color: #D8D8D8;
}

#wrapper {
  width: 995px;
  padding: 0px;
  margin: 0px auto;
  font-family: helvetica;
  position: relative;
}

#wrapper .baricon {
  display: inline-block;
  border-radius: 100%;
  padding: 12px;
  background-color: #38610B;
  color: white;
}

#wrapper .progress_bar {
  width: 200px;
  height: 5px;
  border-radius: 20px;
  background-color: #D8D8D8;
  display: inline-block;
}

#wrapper form div {
  margin-left: 340px;
  padding: 10px;
  box-sizing: border-box;
  width: 300px;
  margin-top: 50px;
  background-color: #585858;
}

#wrapper form div p {
  color: #F2F2F2;
  margin: 0px;
  margin-top: 10px;
  font-weight: bold;
}

#wrapper form div .form_head {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 30px;
}

#wrapper form div input[type="text"] {
  width: 200px;
  height: 40px;
  padding: 5px;
  border-radius: 5px;
  border: none;
  margin-top: 10px;
}

#wrapper form div input[type="button"],
input[type="submit"] {
  width: 80px;
  height: 40px;
  border-radius: 5px;
  border: 2px solid white;
  background: none;
  color: white;
  margin: 5px;
  margin-top: 10px;
}

#user_details,
#qualification {
  display: none;
}

.error { background-color:pink !important}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="wrapper">
  <br>
  <span class='baricon'>1</span>
  <span id="bar1" class='progress_bar'> </span>
  <span class='baricon'>2</span>
  <span id="bar2" class='progress_bar'> </span>
  <span class='baricon'>3</span>

  <form method="post" action="" id="myForm">
    <div id="account_details" class="page">
      <p class='form_head'>Account Details</p>
      <p>Email Address</p>
      <input type="text" name="email" id="email" placeholder='Email Address'>
      <p>Password</p>
      <input type="text" name="pword" id="pword" placeholder='Password'>
      <br>
      <input type="button" value="Next" class="nav next" />
    </div>

    <div id="user_details" class="page">
      <p class='form_head'>User Details</p>
      <p>First Name</p>
      <input type="text" name="fname" id="fname" placeholder='First Name'>
      <p>Last Name</p>
      <input type="text" name="lname" is="lname" placeholder='Last Name'>
      <p>Gender</p>
      <input type="text" name="gender" id="gender" placeholder='Gender'>
      <br>
      <input type="button" value="Prev" class="nav prev" />
      <input type="button" value="Next" class="nav next" />
    </div>

    <div id="qualification" class="page">
      <p class='form_head'>Qualification</p>
      <p>Qualification</p>
      <input type="text" placeholder='Qualification'>
      <p>Hobbies</p>
      <input type="text" placeholder='Hobbies'>
      <br>
      <input type="button" value="Prev" class="nav prev" />
      <input type="Submit" value="Submit">
    </div>
  </form>

</div>

{{1}}

如何验证多步骤表单

1 个答案: