javascript - 多选项卡表单和 bootstrapValidator

Question

我有一个表单，其字段在不同的选项卡中展开。我正在使用 bootsrap 框架和 bootstrapValidator 来验证表单。但问题是，当我处理第一个选项卡表单字段中的字段时，此选项卡的验证正常。如果所有字段都正确并且我按下提交，无论所有其他字段是否无效，表单都会提交。这是为什么？

<form action="" id="register-form" method="post">
    <input type="hidden" name="csrfmiddlewaretoken" value="gGhsyEKjycBXKMoMMl9tFdOOF6ISez0t">
    <div class="container bg-white">
            <div class="tab-content">

                <div class="tab-pane fade in active" id="client-details">
                    <div class="margin-20"></div>
                    <fieldset>
                        <legend>Personal Data</legend>
                        <span class="help-inline">This are your billing data</span>
                        <div class="margin-20"></div>

                            <div class="form-group">
                                <label for="id_client-first_name">First name:</label>
                                <input class="form-control input-sm" id="id_client-first_name" maxlength="40" name="client-first_name" type="text">
                            </div>


                            <div class="form-group">
                                <label for="id_client-middle_name">Middle name:</label>
                                <input class="form-control input-sm" id="id_client-middle_name" maxlength="40" name="client-middle_name" type="text">
                            </div>


                            <div class="form-group">
                                <label for="id_client-last_name">Last name:</label>
                                <input class="form-control input-sm" id="id_client-last_name" maxlength="40" name="client-last_name" type="text">
                            </div>


                            <div class="form-group">
                                <label for="id_client-adress">Adress:</label>
                                <input class="form-control input-sm" id="id_client-adress" maxlength="40" name="client-adress" type="text">
                            </div>


                            <div class="form-group">
                                <label for="id_client-email">Email:</label>
                                <input class="form-control input-sm" id="id_client-email" maxlength="75" name="client-email" type="email">
                            </div>


                            <div class="form-group">
                                <label for="id_client-phone_no">Phone no:</label>
                                <input class="form-control input-sm" id="id_client-phone_no" maxlength="20" name="client-phone_no" type="text">
                            </div>


                            <div class="form-group">
                                <label for="id_client-mobile">Mobile:</label>
                                <input class="form-control input-sm" id="id_client-mobile" maxlength="20" name="client-mobile" type="text">
                            </div>


                            <div class="form-group">
                                <label for="id_client-no_of_doctors">No of doctors:</label>
                                <input class="form-control input-sm" id="id_client-no_of_doctors" name="client-no_of_doctors" type="number">
                            </div>



                    </fieldset>
                </div>
                <div class="tab-pane fade" id="user-data">
                    <div class="margin-20"></div>
                    <fieldset>
                        <legend>User details</legend>
                        <span class="help-block">Please provide with username and password</span>
                        <div class="margin-20"></div>

                            <div class="form-group">
                                <label for="id_user_data-first_name">First name:</label>
                                <input class="form-control input-sm" id="id_user_data-first_name" maxlength="30" name="user_data-first_name" type="text">
                            </div>

                            <div class="form-group">
                                <label for="id_user_data-last_name">Last name:</label>
                                <input class="form-control input-sm" id="id_user_data-last_name" maxlength="30" name="user_data-last_name" type="text">
                            </div>

                            <div class="form-group">
                                <label for="id_user_data-username">Username:</label>
                                <input class="form-control input-sm" id="id_user_data-username" maxlength="30" name="user_data-username" type="text">
                            </div>

                            <div class="form-group">
                                <label for="id_user_data-email">Email address:</label>
                                <input class="form-control input-sm" id="id_user_data-email" maxlength="254" name="user_data-email" type="text">
                            </div>

                            <div class="form-group">
                                <label for="id_user_data-password1">Password:</label>
                                <input class="form-control input-sm" id="id_user_data-password1" name="user_data-password1" type="password">
                            </div>

                            <div class="form-group">
                                <label for="id_user_data-password2">Password confirmation:</label>
                                <input class="form-control input-sm" id="id_user_data-password2" name="user_data-password2" type="password">
                            </div>

                    </fieldset>
                </div>
                <div class="tab-pane fade" id="practice-details">
                    <div class="margin-20"></div>
                    <fieldset>
                        <legend>Practice Details</legend>
                        <span class="help-block">Please provide details of your practice</span>
                        <span class="help-block">If you don't provide we will use your client details.</span>


                            <div class="form-group">
                                <label for="id_practice_data-name">Name:</label>
                                <input class="form-control input-sm" id="id_practice_data-name" maxlength="50" name="practice_data-name" type="text">
                            </div>

                            <div class="form-group">
                                <label for="id_practice_data-address">Address:</label>
                                <input class="form-control input-sm" id="id_practice_data-address" maxlength="50" name="practice_data-address" type="text">
                            </div>

                            <div class="form-group">
                                <label for="id_practice_data-postal_code">Postal code:</label>
                                <input class="form-control input-sm" id="id_practice_data-postal_code" maxlength="10" name="practice_data-postal_code" type="text">
                            </div>

                            <div class="form-group">
                                <label for="id_practice_data-phone_no">Phone no:</label>
                                <input class="form-control input-sm" id="id_practice_data-phone_no" maxlength="10" name="practice_data-phone_no" type="text">
                            </div>

                            <div class="form-group">
                                <label for="id_practice_data-city">City:</label>
                                <input class="form-control input-sm" id="id_practice_data-city" maxlength="10" name="practice_data-city" type="text">
                            </div>

                    </fieldset>
                </div>

            </div>
            <input type="submit" id="btn-register" name="register" class="btn btn-default btn-sm">
            <div class="margin-20"></div>

    </div>

</form>

和 bootstrapValidator js

 $("#register-form").bootstrapValidator({
            fields:{
                "client-first_name":{
                    validators:{
                        notEmpty:{
                            message:"This field is required"
                        }
                    }
                },
                "client-last_name":{
                    validators:{
                        notEmpty:{
                            message:"This field is required"
                        }
                    }
                },
                "client-phone_no":{
                    validators:{
                        notEmpty:{
                            message:"This field is required"
                        }
                    }
                },
                "client-adress":{
                    validators:{
                        notEmpty:{
                            message:"This field is required"
                        }
                    }
                },
                "client-mobile_no":{
                  validators:{
                      notEmpty:{
                          message:"This field is required"
                      }
                  }
                },
                "client-no_of_doctors":{
                    validators:{
                        notEmpty:{
                            message:"This field is required"
                        }
                    }
                },
                "client-email": {
                    validators: {
                        remote:{
                            url:"url_to_check_availability",
                            message: "This email already exists",
                            type:"GET"


                        },
                        notEmpty:{
                            message: "This field is required"
                        }
                    }
                },
                "user_data-username": {
                    validators: {
                        remote: {
                            url: "url_to_check_availability",
                            message: "This username already exists",
                            type: "GET"
                        },
                        notEmpty: {
                            message: "This field is required"
                        }

                    }
                },
                "user_data-password1":{
                    validators:{
                        notEmpty:{
                            message:"This field is required"
                        }

                    }

                },
                "user_data-password2":{
                    validators:{
                        identical:{
                            field:"user_data-password1",
                            message:"Passwords do not match"
                        }
                    }
                },
                "practice_data-logo":{
                    validators:{

                    }
                }
            }
        }).on('success.form.bv', function(e){
            e.preventDefault();
            var form = $(e.target);
            console.log(form.serialize());

            $.ajax({
                timeout:15000,
                url:"/order/",
                type: 'post',
                dataType:"json",
                data:form.serialize(),
                success:function(data, status, jqXHR){
                    console.log(data);
                    alert("saved successfully");
                    parent.location.replace('/crm/accounts/login/');


                },
                error:function(jqXHR, status, message){
                    if (status == "timeout"){
                        alert("The server took more time to respond");
                        alert(message);
                    }
                    else{

                        alert("Status: "+status+" Message: "+message);
                    }
                }

            });
        });

不应该在提交时验证表单？我该如何解决这个问题？有什么想法吗？

Answer 1

不理解我的问题的负面观点，但无论哪种方式我都会回答。

为了绕过这个，我加了

excluded:":disabled"

在我的 validatorPlugin 选项上，因为选项卡隐藏了内容。现在它就像一个魅力。