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/

posted @ 2022-02-12 16:37  码上的飞鱼  阅读(200)  评论(0)    收藏  举报