在移動到下一頁之前，如何使用 html 5 javascript 驗證多頁表單

Question

有兩個功能正在進行，一個是在無法識別的按鈕中提交。 在 js $(".next").click(function(){..} 功能正在運行。

HTML這里使用了 4 個字段集。 我希望在轉到下一頁之前對每個人都進行驗證，但沒有做到這一點。

<div id="sellerregsetup" class="sellerregsetup">
            <!--alert line code-->
              <div class="alert alert-warning alert-dismissible fade show" role="alert">
                  Complete all steps below to start selling
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
              </div>
            <!--End alert line code-->
            <!--testing-->
            <div class="row justify-content-center ">
                <div class="col-md-12 text-center p-0 ">
                    <div class="card px-0 pt-4 pb-0 ">
                        <div class="row">
                            <div class="col-md-12 mx-0">
                                <form id="msform" action="/action_page.php" class="was-validated" >
                                    <!-- progressbar -->
                                    <ul id="progressbar">
                                        <li class="active" id="account"><strong>Account</strong></li>
                                        <li id="personal"><strong>Personal</strong></li>
                                        <li id="payment"><strong>Payment</strong></li>
                                        <li id="confirm"><strong>Finish</strong></li>
                                    </ul> <!-- fieldsets -->
                                  
                                        <fieldset>
                                            <div class="form-card">
                                                <h2 class="fs-title">Address</h2> 
                                                <div class="form-group">
                                                  <input type="text" class="form-control" id="Fname" name="Fname" placeholder="First Name" required>
                                                  <div class="valid-feedback">Valid.</div>
                                                  <div class="invalid-feedback" style="display:none">Please fill out this field.</div>
                                                </div>
                                                <div class="form-group">
                                                  <input type="text" class="form-control" id="Lname" name="Lname" placeholder="Last Name" required>
                                                  <div class="valid-feedback">Valid.</div>
                                                  <div class="invalid-feedback" style="display:none">Please fill out this field.</div>
                                                </div>
                                                <div class="form-group">
                                                  <input type="text" class="form-control" id="addr1" name="addr1" placeholder="Address Line 1" required>
                                                  <div class="valid-feedback">Valid.</div>
                                                  <div class="invalid-feedback" style="display:none">Please fill out this field.</div>
                                                </div>
                                                <div class="form-group">
                                                  <input type="text" class="form-control" id="addr2" name="addr2" placeholder="Address Line 2" required>
                                                  <div class="valid-feedback">Valid.</div>
                                                  <div class="invalid-feedback" style="display:none">Please fill out this field.</div>
                                                </div>
                                            </div> 
                                            <!--<input type="button" name="next" class="next action-button" value="Next Step" />-->
                                            <button type="submit" name="next" class="btn btn-Gorange next " value="Next Step" >Next Step</button>
                                        </fieldset>
                                    
                                    <fieldset>
                                        <div class="form-card">
                                            <h2 class="fs-title">GSTIN</h2> <input type="text" name="fname" placeholder="GSTIN" /> 
                                              <button type="submit" name="submit" class="btn btn-Gorange submit " value="submit">Submit</button>
                                        </div> <input type="button" name="previous" class="previous action-button-previous" value="Previous" /> <input type="button" name="next" class="next action-button" value="Next Step" />
                                    </fieldset>
                                    <fieldset>
                                        <div class="form-card">
                                            <h2 class="fs-title">Bank</h2>
                                          
                                            <input type="text" name="ano" placeholder="Account Name" /> 
                                            <input type="number" name="ano" placeholder="Account Number" /> 
                                            <input type="number" name="ano" placeholder="IFC code" /> 
                                            <input type="number" name="ano" placeholder="cif number" /> 
                                            
                                        </div> <input type="button" name="previous" class="previous action-button-previous" value="Previous" /> <input type="button" name="make_payment" class="next action-button" value="Confirm" />
                                    </fieldset>
                                    <fieldset>
                                        <div class="form-card">
                                            <h2 class="fs-title text-center">Success !</h2> <br><br>
                                            <div class="row justify-content-center">
                                                <div class="col-3"> <img src="https://img.icons8.com/color/96/000000/ok--v2.png" class="fit-image"> </div>
                                            </div> <br><br>
                                            <div class="row justify-content-center">
                                                <div class="col-7 text-center">
                                                    <h5>You Have Successfully Signed Up</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </fieldset>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--testing-->
        </div>

javascript我嘗試使用 onsubmit 而不是點擊事件，但它不起作用。 我在 Js 中不是那么好。 如果有人可以幫助我找出錯誤或缺失的地方，那將是一個很大的幫助。

$(document).ready(function(){

var current_fs, next_fs, previous_fs; //fieldsets
var opacity;

$(".next").click(function(){

current_fs = $(this).parent();
next_fs = $(this).parent().next();

//Add Class Active
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now) {
// for making fielset appear animation
opacity = 1 - now;

current_fs.css({
'display': 'none',
'position': 'relative'
});
next_fs.css({'opacity': opacity});
},
duration: 600
});
});

$(".previous").click(function(){

current_fs = $(this).parent();
previous_fs = $(this).parent().prev();

//Remove class active
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

//show the previous fieldset
previous_fs.show();

//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now) {
// for making fielset appear animation
opacity = 1 - now;

current_fs.css({
'display': 'none',
'position': 'relative'
});
previous_fs.css({'opacity': opacity});
},
duration: 600
});
});

$('.radio-group .radio').click(function(){
$(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected');
});

$(".submit").click(function(){
return false;
})

});

Answer 1

未經測試，您的問題（至少一個）似乎是表單在 JS 驗證運行之前提交。 有幾種方法可以防止這種情況發生。 一種方法是捕獲點擊事件並阻止它通過

$(".next").click(function(e){
    ...
    e.preventDefault();