javascript - jquery-如何验证表单的每个选项卡页面？

Question

我有一个如下所示的表单:

我希望每个输入都是强制性的，并要求用户在进入下一个选项卡之前通过单击下一步按钮进行输入。我实现了 jquery 验证插件，如下所示:

代码:

<form method="POST" action="{{ route('register') }}" id="register-form">
                    @csrf
                    <div class="tab-content" id="myTabContent">
                        <!-- Registration  Tab-->
                        <div class="tab-pane fade show active" id="registration" role="tabpanel" aria-labelledby="registration-tab">
                            <h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Account Particulars</h5>
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label for="email">Email</label>
                                    <input type="email" name="email" class="form-control" required id="email" placeholder="Email">
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="password">Password</label>
                                    <input type="password" name="password" class="form-control" required id="password">
                                </div>

                                <div class="form-group col-md-12">
                                    <label for="password-confirm">Confirm Password</label>
                                    <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                                </div>
                            </div>

                            <!-- Next Button -->
                            <div class="text-right">
                                <!-- <a class="btn btn-secondary next-button" id="information-tab" data-toggle="tab" href="#information" role="tab" aria-controls="profile" aria-selected="false">Next</a> -->
                                <a class="btn btn-secondary next-button" id="next-btn">Next</a>
                            </div>
                        </div>

                        <!-- Information Tab -->
                        <div class="tab-pane fade" id="information" role="tabpanel" aria-labelledby="information-tab">
                            <!-- Personal Particulars -->
                            <h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Personal Particulars</h5>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="full_name">Full Name (as per NRIC)</label>
                                    <input type="text" name="full_name" class="form-control" id="full_name" placeholder="Full Name">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="nric">NRIC Number</label>
                                    <input type="text" name="nric" class="form-control" id="nric" placeholder="NRIC Number">
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label for="address_1">Address Line 1</label>
                                    <input type="text" name="address_1" id="address_1" class="form-control" placeholder="Residential Address Line 1">
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="address_1">Address Line 2</label>
                                    <input type="text" name="address_2" id="address_2" class="form-control" placeholder="Residential Address Line 1">
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="address_1">Address Line 3</label>
                                    <input type="text" name="address_3" id="address_3" class="form-control" placeholder="Residential Address Line 1">
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="postcode">Postcode</label>
                                    <input type="text" name="postcode" id="postcode" class="form-control" placeholder="Postcode">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="city">City</label>
                                    <input type="text" name="city" id="city" class="form-control" placeholder="City">
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="state">State</label>
                                    <select name="state" id="state" class="form-control">
                                        <option disabled selected>Choose your state..</option>
                                        @foreach($states as $state)
                                        <option class="text-capitalize" value="{{ $state->id }}">{{ $state->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="contact_number_home">Contact Number (Home)</label>
                                    <input type="text" name="contact_number_home" class="form-control" placeholder="Home Contact Number">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="contact_number_mobile">Contact Number (Mobile)</label>
                                    <input type="text" name="contact_number_mobile" class="form-control" placeholder="Mobile Contact Number">
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="col-12">
                                    <label style="display: block;" for="existing_customer_options">Are you an existing Destiny Code customer?</label>
                                    <div class="form-check form-check-inline">
                                        <input type="radio" class="form-check-input" name="existing_customer" value="0" checked>
                                        <label class="form-check-label" for="existing_customer">No</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="radio" class="form-check-input" name="existing_customer" value="1">
                                        <label class="form-check-label" for="existing_customer">Yes</label>
                                    </div>
                                </div>
                            </div>

                            <!-- Next Button -->
                            <div class="text-right">
                                <!-- <a class="btn btn-secondary next-button" id="agreement-tab" data-toggle="tab" href="#agreement" role="tab" aria-controls="profile" aria-selected="false">Next</a> -->
                                <a class="btn btn-secondary next-button">Next</a>
                            </div>
                        </div>

                        <div class="tab-pane fade" id="agreement" role="tabpanel" aria-labelledby="agreement-tab">
                            <h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Agreement</h5>

                            <!-- Registration Agreement -->

...............

 <div class="row">
                                <div class="col-12 col-md-8 offset-md-2 pl-3 pr-3 pt-2 mb-0">
                                    <canvas class="display-block signature-pad" style="touch-action: none;"></canvas>
                                    <p id="signatureError" style="color: red; display: none;">Please provide your signature.</p>
                                    <div class="p-1 text-right">
                                        <button id="resetSignature" class="btn btn-sm" style="background-color: lightblue;">Reset</button>
                                        <button id="saveSignature" class="btn btn-sm" style="background-color: #fbcc34;">Save</button>
                                    </div>
                                    <input type="hidden" name="signature" id="signatureInput">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 mb-0 pt-2">
                                    <!-- Submit Button -->
                                    <div class="text-right">
                                        <input type="hidden" name="registrationFor" value="customer">
                                        <button type="submit" class="bjsh-btn-gold text-right">Sign Up</button>
                                    </div>
                                </div>
                            </div>

  // Validate each input tab before moving to the next tab

    $(document).ready(function() {
    $("#register-form").validate({
        rules: {
            email: "required",
            password:"required",
            password_confirmation:"required"
        },
        messages: {
            email: "Please enter an email",
            password: "Please enter a password",
            password_confirmation: "Please confirm your password"
        }
    })

    $('#next-btn').on('click',function() {
        $("#register-form").valid();
    });
});

我检查了我的控制台，没有错误，并且我实现了正确的库，但是我仍然可以继续执行下一个按钮。为什么不起作用？

Answer 1

实际上发生了错误，但您的表单正在重定向到另一个页面，因此添加此

event.preventDefault();

之前

$("#register-form").valid();