我不是一个jqueryMaven，所以我用纯js（Vanila Js）插入了我的代码。所以如果你有任何疑问，你可以问。

function sliderFour(p,event){
  // event.preventDefault();
  
   if(p !== "4"){
    return true;
  }
  // e.preventDefault()
  //Verification of other slides 
  
  let slideOne = sliderOne(event.target.id)
  let slideTwo = sliderTwo(event.target.id) ;
  let slideThree = sliderThree(event.target.id);
  
  if(!slideOne || !slideTwo || !slideThree){
    // Reset your slider here 
   event.preventDefault()
    return ;
  }
  
  let verify1 = false ; let verify2 = false ;
  // Radio buttons 
  const q4a0 = document.getElementsByName("q4a")[0]
  const q4a1 = document.getElementsByName("q4a")[1]
  
  
  if (
      (q4a0.checked && !q4a1.checked) || 
      (!q4a0.checked && q4a1.checked)
  ){
    // console.log("verified 2 ");
    verify1 = true ;
  }
  
  // Check Box
 const term =  document.getElementById("terms_and_conditions");
  if(term.checked){
    verify2 = true ;
  }
  let verify = false ;
  if(verify1 && verify2){
    verify = true;
  }
  if(!verify){
    event.preventDefault()
    alert("please fill all the crdentials");
  }else{
    // event.submit()
  }
  
  return verify ;
}
// submit function for form 
function formSubmit(event){
  sliderFour("4",event)
}

function q2bYClick (){
  document.getElementById("q2bN").checked = false ;
  document.getElementById("q2bY").checked = true ;
}
function q2bNClick (){
  document.getElementById("q2bN").checked = true ;
  document.getElementById("q2bY").checked = false;
}
function sliderOne(p){
  
  if(p !== "1"){
    return true;
  }
  // slider one 
  const c1 = document.getElementById("c1") ;
  const c2 = document.getElementById("c2") ;
  // console.log(c1.checked);
  // console.log(c2.checked);
  
  // checked attribute will return true if checked or false if not
  
  if(!c1.checked || !c2.checked){
    
    // '||' means 'or'
    // !c1.checked mean if c1.checked is false 
    // ! means not
    // c1.checked mean if c1.checked is true
    alert("please Input all the value correctly") ;
    // now stop the .next click function here ;
    return false ;
  }
  return true ;
}
function sliderTwo(p) {
  if(p !== "2"){
    return true;
  }
  let verify1 = false ;
  let verify2 = false ;
  let verify3 = false ;
  let verify4 = false ;
  let verify5 = false ;
  // console.log('working') ;
  const s2t1 = document.getElementById("s2t1") ;
  // console.log(typeof s2t1.value);
  if (typeof s2t1.value === "string" && 
      s2t1.value !== ""
     ){
    // console.log("verfied 1") ;
    verify1 = true ;
  }else{
    // console.log("Not Verified 1")
  }
  
  //check box
  
  const q2bY = document.getElementById("q2bY") ;
  const q2bN = document.getElementById("q2bN") ;
  
  if (
      (q2bY.checked && !q2bN.checked) || 
      (!q2bY.checked && q2bN.checked)
  ){
    // console.log("verified 2 ");
    verify2 = true ;
  }else {
    // console.log("Not verified 2 ");
  }
  
  // Option 
  
  const q2c = document.getElementById("q2c") ;
  
  let optionsArray = [] ;
  var options = q2c.options;
for (let i = 0; i < options.length; i++) { 
  optionsArray.push(options[i].value) ;
  // console.log(options[i].value);//log the value
}
  // console.log(optionsArray);
  
  if(optionsArray.includes(q2c.value) && q2c.value !== ""){
    // console.log("verified3");
    verify3 = true ;
  }
  else{
    // console.log("Not verified3");
  }
  
  
  
  // Text Area 
  
  const s2te1 = document.getElementById("s2t1") ;
  console.log(s2te1.value);
  
  if (typeof s2te1.value === "string" && 
      s2te1.value.trim !== ""
     ){
    // console.log("verfied 4") ;
    verify4 = true ;
  }else{
    // console.log("Not Verified 4")
  }
  
  // Date 
  
  const s2d1 = document.getElementById("s2d1") ;
  if (typeof s2d1.value === "string" && 
      s2d1.value !== ""
     ){
    // console.log("verfied 5") ;
    verify5 = true ;
  }else{
    // console.log("Not Verified 5")
  }
  let  verify = false ;
  if( verify1 && verify2 && verify3 && verify4 && verify5 ){
    verify = true ;
  }
  if(!verify){
    alert("Please fill all required fields");
  }
  return verify;
}

function sliderThree (p){
   if(p !== "3"){
    return true;
  }
  var email_validator_regex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
   const s3e1 = document.getElementById("s3e1") ;
  let verify = false ;
  if(s3e1.value.match(email_validator_regex)){
    verify = true ;
  }
  if(!verify){
    alert("Please enter valid email")
  }
  
  return verify ;
}

$(function() {

var current_fs, next_fs, previous_fs; 
var left, opacity, scale; 
var animating; 
$(".next").click(function(event){
  // Start of Editing Editing 
  // alert(event.target.id);
  
  // slider two 
  let slideOne = sliderOne(event.target.id)
  let slideTwo = sliderTwo(event.target.id) ;
  let slideThree = sliderThree(event.target.id);
  
  if(!slideOne || !slideTwo || !slideThree){
    return ;
  }
  
  // End of Editing 
    if(animating) return false;
    animating = true;
    
    current_fs = $(this).parent();
    next_fs = $(this).parent().next();
    $("#progressbar li").eq($("fieldset").index(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)+"%";
            opacity = 1 - now;
            current_fs.css({'transform': 'scale('+scale+')'});
            next_fs.css({'left': left, 'opacity': opacity});
        }, 
        duration: 1000, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        easing: 'easeInOutBack'
    });
});

$(".previous").click(function(){
    if(animating) return false;
    animating = true;
    
    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
    previous_fs.show(); 
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            scale = 0.8 + (1 - now) * 0.2;
            left = ((1-now) * 50)+"%";
            opacity = 1 - now;
            current_fs.css({'left': left});
            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
        }, 
        duration: 1000, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        easing: 'easeInOutBack'
    });
});

$(".submit").click(function(){
    
    $("#msform").submit();
})

});

@import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);
@import url(https://fonts.googleapis.com/css?family=Raleway);
* {
    margin: 0;
    padding: 0;
}

body{
    font-family: Raleway;
}

h3{
    color: #002e6d;
    font-size:18px;
    line-height:28.8px; 
    font-weight:700;
    margin:0px 0px 30px;
}
#title {
    color: #002e6d;
    font-size:18px;
    line-height:28.8px; 
    font-weight:700;
    margin:0px 0px 30px;    
}

#msform{
    width: 85%;
    margin: 50px auto;
    position: relative; 
}

#msform fieldset{
    background: white;
    border: 0 none;
    border-radius: 3px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
    box-sizing: border-box;
    width: 80%;
    margin: 0 10%;
    position: absolute;
}
#msform fieldset:not(:first-of-type){
    display: none;
}

#msform fieldset{
    text-align: left;
}
#msform textarea{
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: sans-serif;
    color: #29282d;
    font-size: 17px;
    border: 1px solid #aaaaaa;
    border-left:6px solid #42A948;
}

#msform textarea:placeholder-shown {
  border-left: 5px solid red;
}

#msform input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: sans-serif;
    color: #29282d;
    font-size: 17px;
    border: 1px solid #aaaaaa;
    border-left:6px solid #42A948;    
}

#msform input:placeholder-shown{
    border-left: 5px solid red;
}
select{

 width: 100%;
 height: 45px;
  font-size: 17px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;  
}

/*Errors for validation*/
textarea.invalid {
  background-color: #ffdddd;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

#msform .action-button{
    width: 100px;
    background: #002e6d;
    font-weight: 400;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus{
    box-shadow: 0 0 0 2px white, 0 0 0 3px #002e6d;
}
.fs-title{
    font-size: 15px;
    text-transform: uppercase;
    color: #2C3E50;
    margin-bottom: 10px;
    font-weight:500;
}
.fs-subtitle{
    font-weight: normal;
    font-size: 13px;
    color: #666;
    margin-bottom: 0px;
}
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    counter-reset: step;
}
#progressbar li {
    list-style-type: none;
    color: #D2D2D2;
    text-transform: capitalize;
    font-size: 16px;
    width: 25%;
    float: left;
    position: relative;
}
#progressbar li.active {
    color: #002e6d;
}
#progressbar li:before{
    content:'' ;/*counter(step)*/
    counter-increment: step;
    width: 50px;
    line-height: 50px;
    display: block;
    font-size: 18px;
    color:#fff ;
    background: transparent;
    border-radius: 100%;
    margin: 0 auto 5px auto;    
    border: 2px solid #ECECEC;
}
#progressbar li:nth-child(1):before{
    content:"\f129" ;
    font-family: 'FontAwesome';
    color: #002e6d; 
}
#progressbar li:nth-child(2):before{
    content:"\f015" ;
    font-family: 'FontAwesome';
    color: #80858a;
    border: 2px solid #80858a;  
}
#progressbar li:nth-child(3):before{
    content:"\f007" ;
    font-family: 'FontAwesome';
    color: #80858a;
    border: 2px solid #80858a;      
}
#progressbar li:nth-child(4):before{
    content:"\f15c" ;
    font-family: 'FontAwesome';
    color: #80858a;
    border: 2px solid #80858a;      
}
#progressbar li:after {
    content: '';
    width: 73%;
    height: 2px;
    background: #ECECEC;
    position: absolute;
    left: -35%;
    top: 25px;
    z-index: -1;
}
#progressbar li:first-child:after {
    content: none;
}
#progressbar li.active:before {
    border: 2px solid #002e6d;
    color: white;
    background-color:#002e6d;
  /* content: "\f164";*/
}
#progressbar li.active:after {
    background: #002e6d;
    color: white;
}
.form_holder {
    text-align: center;
    margin: 30px 0 0;
}

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css">
  

</head>
 
<body>
<div class="form_holder">
<h2 class="fs-title" style="color: red;">MULTI STEP FORM WITH PHP, JS AND CSS</h2>
<hr>

<form  onsubmit="formSubmit(event)" id="msform" action="app.php" method="POST">

  <ul id="progressbar">
    <li class="active">Step one</li>
    <li>Step Two</li>
    <li>Step Three</li>
    <li>Step Four</li>
  </ul>
  <fieldset>
    <h3>THIS IS IS A MULTIPLE STEP FORM</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <h2 class="fs-title" id="title">Step one</h2>
    <h3 class="fs-subtitle">Step 1 of 4</h3>

    <h3>Q1a. Pick  one of the following</h3>

    
    <input type="radio" name="qualification1" value="Applicant is an individual."> This one.
    <br>

    <input type="radio" name="qualification1" value="Applicant is an existing business with not more than 500 employees." required="" checked=""> Or this one.
    <br>

   
    <br>
    <br>

  
    <hr> 

    <h3>Q1b. Review and Check All of the Following:</h3>
    <p><strong>All the followingmust be checked.</strong></p>
    <br>

 
      
    <input type="checkbox" name="qualification2c" required="" value="Applicant is not in the business of lobbying." id = "c1">&nbsp This one.
    <br>

  
    <input type="checkbox" name="qualification2d" required="" value="Is an adult of sound mind."  id = "c2">&nbsp And this one.
    <br>
 
    
    <hr>

    <p>This NEXT button should be inactive until on radio is check in q1. and all checkbox marked in Q2.</p>
    <input id = "1" type="button" name="next" class="next action-button" value="Next" />
  </fieldset>
  <fieldset>
    <h3>Step Two</h3>
    <h3 class="fs-subtitle">Step 2 of 4</h3>
    <p>Q2a(text type)<br>
    <input placeholder=" " oninput="this.className = ''" type="text" name=" " required="" style="width:100%;" id = "s2t1"></p>

    <p>Q2b checkbox type<br>
    <input type="radio"  name="q2b" value="Yes" required="" checked="" id = "q2bY" onclick = "q2bYClick()"> Yes 
    <input type="radio"  name="q2bN" value="No" id = "q2bN" 
           onclick = "q2bNClick()"> NO </p>
    
    
    <p>Q2c select typeOrganization structure<br>
    <select name="q2c" required="" placeholder="Choose One" id = "q2c">
    <option value="" disabled selected> Select your option</option>
    <option value="1">Option1</option>
    <option value="2">Option2</option>
    <option value="3">Option3</option>       
    </select>
    </p>
   
    
 
    <p>Detailed activity undertaken<textarea name="activity-details" required="" placeholder=" " id = "s2te1"></textarea></p>

    
    <p>Date<br><input id = "s2d1" placeholder=" " oninput="this.className = ''" type="text" onfocus="(this.type='date')" onblur="if(!this.value)this.type='text'" name="" required=""style="width:100%; "></p>

    

    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input id="2" type="button" name="next" class="next action-button" value="Next" />
  </fieldset>
  <fieldset>
    <h3>Step Three</h3>
    <h3 class="fs-subtitle">Step 3 of 4</h3>    

    <p>Email<br><input id = "s3e1" placeholder=" " oninput="this.className = ''" type="mail" name="" required=""style="width:100%;"></p>

    <input type="button" name="previous" class="previous action-button" value="Previous"  />
    <input id = "3" type="button" name="next" class="next action-button" value="Next"/>
  </fieldset>
   <fieldset>
    <h3>Step Four</h3>
    <h3 class="fs-subtitle">Step 4 of 4</h3>

    <p> Radio button</p>
    <input type="radio" name="q4a" value="Yes" required="" checked=""> Yes
    <input type="radio" name="q4a" value="No"> No

    <p><input type="checkbox" id="terms_and_conditions" value="I agree to the Terms and Conditions" name="agreement" />I agree to the Terms and Conditions</p>

    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <!--input type="submit" name="submit" class="submit action-button" value="Submit" />-->
    <button  id = "4" type="submit" class="submit action-button">Submit</button>
  </fieldset>
</form>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Creating-A-Modern-Multi-Step-Form-with-jQuery-CSS3/js/jquery.easing.min.js"></script>
<script  src="./formscript.js"></script>

</body>
</html>