jQuery MultiStep Form with Validations

jQuery MultiStep Form with Validations

by Cone

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
<style>
  .tab {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }
  .tab.current {
    display: block;
    opacity: 1;
  }
</style>

<form id="myForm" action="/register" method="POST">
  <h1>Register:</h1>
  <!-- One "tab" for each step in the form: -->
  <div class="tab current">Name:
    <p><input placeholder="First name..." name="fname"></p>
    <p><input placeholder="Last name..." name="lname"></p>
  </div>
  <div class="tab">Contact Info:
    <p><input placeholder="E-mail..." name="email"></p>
    <p><input placeholder="Phone..." name="phone"></p>
  </div>
  <div class="tab">Birthday:
    <p><input placeholder="dd" name="date"></p>
    <p><input placeholder="mm" name="month"></p>
    <p><input placeholder="yyyy" name="year"></p>
  </div>
  <div class="tab">Login Info:
    <p><input placeholder="Username..." name="username"></p>
    <p><input placeholder="Password..." name="password" type="password"></p>
  </div>
  <div style="overflow:auto;">
    <div style="float:right;">
      <button type="button" class="previous">Previous</button>
      <button type="button" class="next">Next</button>
      <button type="button" class="submit">Submit</button>
    </div>
  </div>
  <!-- Circles which indicates the steps of the form: -->
  <div style="text-align:center;margin-top:40px;">
    <span class="step">1</span>
    <span class="step">2</span>
    <span class="step">3</span>
    <span class="step">4</span>
  </div>
</form>

CSS

* {
  box-sizing: border-box;
}

.tab {
  display: none;
  width: 100%;
  height: 50%;
  margin: 0px auto;
}

.current {
  display: block;
}

body {
  background-color: #f1f1f1;
}

form {
  background-color: #ffffff;
  margin: 100px auto;
  font-family: Raleway;
  padding: 40px;
  width: 80%;
  min-width: 300px;
}

h1 {
  text-align: center;
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}

button {
  background-color: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

.previous {
  background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */

.step {
  height: 30px;
  width: 30px;
  cursor: pointer;
  margin: 0 2px;
  color: #fff;
  background-color: #bbbbbb;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.8;
  padding: 5px
}

.step.active {
  opacity: 1;
  background-color: #69c769;
}

.step.finish {
  background-color: #4CAF50;
}

.error {
  color: #f00;
}

.tab {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.tab.current {
  display: block;
  opacity: 1;
}

JavaScript

$(document).ready(function() {
  $.validator.addMethod('date', function(value, element) {
    return (value > 0 && value <= 31);
  }, 'Please enter a valid date!');

  $.validator.addMethod('month', function(value, element) {
    return (value > 0 && value <= 12);
  }, 'Please enter a valid month!');

  $.validator.addMethod('year', function(value, element) {
    return (value >= 1900);
  }, 'Please enter a valid year not less than 1900!');

  var validator = $("#myForm").validate({
    rules: {
      fname: "required",
      email: {
        required: true,
        email: true
      },
      phone: {
        required: true,
        digits: true,
        minlength: 10,
        maxlength: 10
      },
      date: {
        required: true,
        date: true,
        digits: true,
        minlength: 2,
        maxlength: 2
      },
      month: {
        required: true,
        month: true,
        digits: true,
        minlength: 2,
        maxlength: 2
      },
      year: {
        required: true,
        year: true,
        digits: true,
        minlength: 4,
        maxlength: 4
      },
      username: {
        required: true,
        minlength: 4,
        maxlength: 16
      },
      password: {
        required: true,
        minlength: 8,
        maxlength: 16
      }
    },
    messages: {
      fname: "First name is required",
      email: "Enter a valid email",
      phone: "Enter a valid 10-digit phone number",
      date: "Enter a valid date",
      month: "Enter a valid month",
      year: "Enter a valid year",
      username: "Username should be between 4-16 characters",
      password: "Password should be between 8-16 characters"
    },
    errorElement: "div",
    errorPlacement: function (error, element) {
      error.addClass("invalid-feedback");
      element.closest(".tab").append(error);
    },
    highlight: function (element) {
      $(element).addClass("is-invalid");
    },
    unhighlight: function (element) {
     ...