BootstrapValidator 解决多属性被同时校验问题

问题描述：在使用bootstrapValidator插件校验表单属性，出现校验一个属性，发现所有属性都被校验的效果 ，这不是我们工作想要的效果。如图：

 

 问题分析：因为bootstrapValidator默认情况是根据form-group样式验证提示，若我们代码中将同行显示属性放在一个form-group中，就会出现该问题，那么怎么解决呢 ，仔细阅读了该插件官网，发现存在group属性，其值默认为“.form-group”，该属性便是官方提供的在多个属性分组情况使用。

 

解决

先修改html代码

                        <div class="form-group row">
                            @Html.ResourceLabelFor(model => model.FCSJZFS, new { @class = "control-label col-md-2 field-required" })
                            <div class="col-md-2 field-group">
                                @Html.DropDownListHelperForEx(model => model.FCSJZFS, FCSJZFSList, Model.FCSJZFS, "FCSJZFS", new { @class = "form-control" })
                            </div>
                            @Html.ResourceLabelFor(model => model.FCSJCBL, new { @class = "control-label col-md-2 field-required" })
                            <div class="col-md-2 field-group">
                                @Html.TextBoxFor(model => model.FCSJCBL, new { @class = "form-control", @Placeholder = "%" })
                            </div>
                            @Html.ResourceLabelFor(model => model.CJJZNSL, new { @class = "control-label col-md-2 field-required" })
                            <div class="col-md-2 field-group">
                                @Html.TextBoxFor(model => model.CJJZNSL, new { @class = "form-control", @Placeholder = "%" })
                            </div>
                        </div>
                        <div class="form-group row">
                            @Html.ResourceLabelFor(model => model.CJJZMSQ, new { @class = "control-label col-md-2 field-required" })
                            <div class="col-md-2 field-group">
                                @Html.TextBoxFor(model => model.CJJZMSQ, new { @class = "form-control" })
                            </div>
                            @Html.ResourceLabelFor(model => model.CZJZSL, new { @class = "control-label col-md-2 field-required" })
                            <div class="col-md-2 field-group">
                                @Html.TextBoxFor(model => model.CZJZSL, new { @class = "form-control", @Placeholder = "%" })
                            </div>
                            @Html.ResourceLabelFor(model => model.ZJNX, new { @class = "control-label col-md-2 field-required" })
                            <div class="col-md-2 field-group">
                                @Html.TextBoxFor(model => model.ZJNX, new { @class = "form-control" })
                            </div>
                        </div>
                        <div class="form-group row">
                            @Html.ResourceLabelFor(model => model.SFZS, new { @class = "control-label col-md-2 field-required" })
                            <div class="col-md-2 field-group">
                                @Html.DropDownListHelperForEx(model => model.SFZS, SFZSList, Model.SFZS, "SFZS", new { @class = "form-control" })
                            </div>
                        </div>

 

JS修改代码

 

 我们只需要把group设置为field-group即可

修改后

 

文章转载自：快速开发平台– 云微平台
地址：https://www.hocode.com/