jQuery 5段階スライディングフォームを使用してフォーム検証を追加する方法

Question

私は初心者で、他の作業から複雑なJavaScriptを読み理解するのが非常に難しいと感じます。

実際に理解していない複雑なコードを使用するのではなく、単純なjqueryを使用して使用するための助けを借りたいと思います。

まず、これは性別、名、dob、電子メール、パスワードで構成される5段階のフォームです。すべてのステップで検証が行われます。

複雑なコードを参照してください：ここで

<script> 
$(document).ready(function() { 
    var Fist = { 
    config: { 
    stepsSelector: $(".steps"), 
    nextSelector: $(".myButton"), 
    errorSelector: $(".error"), 
    indSelector: $(".steps-ind"), 
    form: "", 
    cur_step: 1, 
    max_step: 1, 
    offset: 278, 
    errorString: "This field is required", 
    clickEvent: "touchstart" 
}, 

    run: function(e) { 
     this.config.form = e; 
     var t = this; 
     var n = $(".regform").width(); 
     t.config.offset = n; 
     if (typeof document.body.ontouchstart === "undefined") { 
      t.config.clickEvent = "click" 
     } 
     t.config.indSelector.find(".step-ind" + t.config.cur_step).addClass("step-ind-active"); 
     t.config.nextSelector.on(t.config.clickEvent, function() { 
      t.process() 
     }); 
     t.config.form.find("input").on("keypress", function(e) { 
      var n = e.keyCode ? e.keyCode : e.which; 
      if (n === 13) { 
       t.process() 
      } 
     }); 
     t.config.indSelector.find("div").on(t.config.clickEvent, function() { 
      t.gotoStep($(this)) 
     }) 
    }, 

    indicateStep: function(e) { 
     var t = this; 
     t.config.indSelector.find("div").removeClass("step-ind-active"); 
     t.config.indSelector.find(".step-ind" + e).addClass("step-ind-active"); 
     setTimeout(function() { $('.step'+e+' input, .step'+e+' select').focus() }, 500); 
    }, 

    animateStep: function(e) { 
     var t = this; 
     t.config.stepsSelector.css({ 
      transform: "translateX(-" + (e - 1) * t.config.offset + "px)" 
     }, function() { 
      t.config.form.find(".step" + e).find("input").focus() 
     }) 
    }, 

    process: function() { 
     var e = this; 
     var t = e.config.form.find(".step" + e.config.cur_step).find("input,select"); 
     var n = false; 
     t.each(function() { 
      if (!e.validate($(this))) { 
      n = true 
      } 
     }); 

     if (!n) { 
      e.config.cur_step++; 
      if (e.config.cur_step === 6) { 
       e.config.form.submit() 
      } else { 
       e.config.max_step = e.config.cur_step; 
       e.animateStep(e.config.cur_step); 
       e.indicateStep(e.config.cur_step); 
       if (e.config.cur_step === 5) { 
        e.config.nextSelector.val("Submit") 
       } 
      } 
     } 
    }, 

    gotoStep: function(e) { 
     var t = e.text(); 
     var n = this; 
     if (t < n.config.max_step) { 
      n.animateStep(t); 
      n.indicateStep(t); 
      n.config.cur_step = t; 
      if (t === 5) { 
       n.config.nextSelector.val("Submit") 
      } else { 
       n.config.nextSelector.val("Next") 
      } 
     } else { 
      n.process() 
     } 
    }, 

    validate: function(e) { 
     var t = this; 
     t.config.errorSelector.hide(); 
     e.removeClass("error-item"); 
     var n = false; 
     if ($.trim(e.val()) === "") { 
      n = true; 
      t.config.errorString = "This field is required" 
     } 

     if (e.attr("name") === "email" && !t.validateEmail(e.val())) { 
      n = true; 
      t.config.errorString = "Invalid email address" 
     } 

     if (e.attr("name") === "firstname" && !t.validateName(e.val())) { 
      n = true; 
      t.config.errorString = "Invalid name" 
     } 

     if (n) { 
      t.config.errorSelector.empty().append(t.config.errorString).fadeIn("fast"); 
      e.addClass("error-item"); 
      return false 
     } 
     return true 
    }, 

    validateEmail: function(e) { 
     var t = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
     return t.test(e) 
    }, 

    validateInt: function(e) { 
     var t = /^\d{1,}$/; 
     return t.test(e) 
    }, 

    validateName: function(e) { 
     var t = /^\w+(\s)?\w+(\s)?(\w+)?$/; 
     return t.test(e) 
    } 
} 
Fist.run($("#regform")); 
}); 

は私のHTMLです：

<div class="regform"> 
<div class="form-wrapper"> 
    <form id="regform" method="post" action="http://www.test.com/signup"> 
     <div class="steps step1"> 
      <label>Your Gender?</label> 
      <div name="gender"> 
       <div class="man-btn color" value="1"> 
        <span>Man</span> 
        <div class="man" > 
         <i class="fa fa-male" aria-hidden="true"></i> 
        </div> 
       </div> 
       <div class="woman-btn" value="2"> 
        <span>Woman</span> 
        <div class="woman"> 
         <i class="fa fa-female" aria-hidden="true"></i> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="steps step2"> 
      <label>First Name:</label> 
      <input type="text" name="firstname"> 
     </div> 
     <div class="steps step3"> 
      <label>What is Your Date of Birth?</label> 
      <select name="dobday" id="dobday" class="required"> 
       <option value="">Day</option> 
       <option value="1">01</option> 
       <option value="2">02</option> 
       <option value="3">03</option> 
       <option value="4">04</option> 
       <option value="5">05</option> 
       <option value="6">06</option> 
       <option value="7">07</option> 
       <option value="8">08</option> 
       <option value="9">09</option> 
       <option value="10">10</option> 
       <option value="11">11</option> 
       <option value="12">12</option> 
       <option value="13">13</option> 
       <option value="14">14</option> 
       <option value="15">15</option> 
       <option value="16">16</option> 
       <option value="17">17</option> 
       <option value="18">18</option> 
       <option value="19">19</option> 
       <option value="20">20</option> 
       <option value="21">21</option> 
       <option value="22">22</option> 
       <option value="23">23</option> 
       <option value="24">24</option> 
       <option value="25">25</option> 
       <option value="26">26</option> 
       <option value="27">27</option> 
       <option value="28">28</option> 
       <option value="29">29</option> 
       <option value="30">30</option> 
       <option value="31">31</option> 
      </select> 
      <select name="dobmonth" id="dobmonth" class="required"> 
       <option value="">Month</option> 
       <option value="1">January</option> 
       <option value="2">February</option> 
       <option value="3">March</option> 
       <option value="4">April</option> 
       <option value="5">May</option> 
       <option value="6">June</option> 
       <option value="7">July</option> 
       <option value="8">August</option> 
       <option value="9">September</option> 
       <option value="10">October</option> 
       <option value="11">November</option> 
       <option value="12">December</option> 
      </select> 
      <select name="dobyear" id="dobyear" class="required"> 
       <option value="">Year</option> 
       <?php for($x=date("Y") - 18; $x >= 1918; $x--): ?> 
        <option value="<?php echo $x; ?>"><?php echo $x; ?></option> 
       <?php endfor; ?> 
      </select> 
     </div> 
     <div class="steps step4"> 
      <label>Email:</label> 
      <input type="email" pattern="[^ @]*@[^ @]*" name="email"> 
     </div> 
     <div class="steps step5"> 
      <label>Password:</label> 
      <input type="password" name="password"> 
     </div> 
     <div class="error">This field is required</div> 
    </form> 
</div> 
<div class="submit"> 
    <input type="button" class="myButton" value="Next"> 
</div> 
<div class="steps-ind"> 
    <div class="step-ind1">1</div> 
    <div class="step-ind2">2</div> 
    <div class="step-ind3">3</div> 
    <div class="step-ind4">4</div> 
    <div class="step-ind5">5</div> 
</div> 

私を助けてください。手伝ってくれてどうもありがとう！

Answer 1

新しいボタンを追加するだけで簡単です！あなたは選択のドロップダウンに性別を変えることができるいずれか、またはあなたは、このような新しいdivを追加することができます：あなたは注意する必要が

  <div class="bro-btn" value="3"> 
       <span>Bro</span> 
       <div class="bro"> 
        <i class="fa fa-bro" aria-hidden="true"></i> 
       </div> 
      </div> 

いくつかのこと：fa fa-broは、対応するアイコンが追加されますあなたのCSS内のクラスへの参照です選択された性別に関係なく上記のような新しいボタンを追加する場合は、一致するアイコンをFont Awesomeから見つける必要があります。