jQuery valiadtion pluggin

jQuery plugin

by mrAhmedkhan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<div class="form" id="rsvp-form">

  <form id="rsvpForm1" action="" method="post">
    <!-- fieldset 1 -->
    <fieldset id="fieldset1">
      <input type="text" name="fname" placeholder="First name*" />
      <textarea name="address" placeholder="Address*"></textarea>
      <button>Next</button>
    </fieldset>
    <!--/ fieldset 1 -->
  </form>

 <form id="rsvpForm2" action="" method="post">
    fieldset 2
    <fieldset id="fieldset2">
      <input type="tel" name="phone" placeholder="Phone*" required />
      <button>Next</button>
    </fieldset>
  </form>
  
 <form id="rsvpForm3" action="" method="post">
    fieldset 3
    <fieldset id="fieldset3">
      <textarea name="other" placeholder="Enter your note here ..." required></textarea>
      <button>Next</button>
    </fieldset>
  </form>

</div>

CSS

.form {
  min-height: 800px;
  user-select: none;
  overflow: hidden;
}
.form form#rsvpForm1,
.form form#rsvpForm2,
.form form#rsvpForm3,

{
  width: 600px;
  margin: 50px auto;
  text-align: center;
  position: relative;
}
.form form#rsvpForm1 fieldset,
.form form#rsvpForm2 fieldset,
.form form#rsvpForm3 fieldset,
{
  background: white;
  border: 0 none;
  border-radius: 3px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 60px 50px;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  display: block !important;
}
#fieldset2,
#fieldset3
{
  opacity: 0;
}
.form form#rsvpForm1 input,
.form form#rsvpForm1 textarea,
.form form#rsvpForm2 input,
.form form#rsvpForm3 input,
.form form#rsvpForm3 textarea,
button
{
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
}
button{
  cursor:pointer;
}

.form form#rsvpForm input.error,
.form form#rsvpForm textarea.error {
  border: 1px solid red;
}

.form form fieldset .error__message{
  display: none;
}

.form form fieldset.has-error .error__message{
  display: block;
}

.active{
  opacity: 1;
}

JavaScript

jQuery(function($) {

  var current_fs, next_fs, previous_fs;
  var left, opacity, scale;
  var animating;
	
  /*First Form*/
  $("#rsvpForm1").validate({
    rules: {
      fname: {
        required: true,
      },
      address: {
        required: true,
        // minlength: 5
      }
    },
    messages: {
      fname: {
        required: "Please enter your firstname",
      },
      address:{
        required: "Please enter your address",
      }
    },

    // if validation is correct, animate in next fieldset
    submitHandler: function(form) {
      formSubmit(form,'#fieldset1','#fieldset2');
    }
  });
  /*----------*/

  /*Second Form*/
  $("#rsvpForm2").validate({
    rules: {
      phone: {
        required: true,
        minlength: 5,
        maxlength: 11  
      }
    },
    messages: {
      phone:{
        required: "Please enter a valid phone number",
        matches: "Invalid value",
        minlength: "Min length is exceeded",
        maxlength: "Max length is exceeded",
      } 
    },

    // if validation is correct, animate in next fieldset
    submitHandler: function(form) {
      formSubmit(form,'#fieldset2','#fieldset3');
    }
  });
  /*-----------*/

  /*Third Form*/
  $("#rsvpForm3").validate({
    rules: {
      phone: {
        required: true,
        matches: "^(\\d|\\s)+$",
        minlength: 11,
        maxlength: 11 
      }
    },
    messages: {
      other:{
        required: "Please enter a message"
      }, 
    },

    // if validation is correct, animate in next fieldset
    submitHandler: function(form) {
      formSubmit(form);
    }
  });
  /*----------*/


  function formSubmit(form, current, next){
    if (animating) return false;
    animating = true;
    current_fs = $(current);
    next_fs = $(next);
    next_fs.addClass("active");

    next_fs.show();
    current_fs.animate({
        opacity: 0
      }, {
        step: function(now, mx) {
          scale = 1 - (1 - now) * 0.2;
          left = (now * 50) +...