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/