formvalidation.io Bootstrap 设计的验证问题

Question

假设您在同一行中有两个字段，一个需要验证，而另一个不需要，当您触发验证时，它也会显示其他字段的验证错误。例如，下面是我仅针对“按名称登录”的验证，但是当我提交表单时，它也会为“经理”字段抛出。只要我在“按名称记录”字段中输入内容，它就会正常。

这是我的 HTML,

<div id="Section_ObserverDetails">
    <div class="col-sm-12">
        <div class="row">
            <div class="panel-body form-horizontal">
                <div class="form-group">
                <div class="col-sm-2">
                    <label for="pro_LoggedByName" class="col-sm-12 control-label">Logged by name</label>
                </div>
                <div class="col-sm-4">
                      <input type="text" class="form-control" id="pro_LoggedByName" name="pro_LoggedByName" value=""    >                           </div>

                <div class="col-sm-2">
                    <label for="top_Manager" class="col-sm-12 control-label">Manager</label>
                </div>
                <div class="col-sm-4" id="div-top-manager">
                     <div class="radio">
                        <label class="form-radio form-normal form-text form-success "><input type="radio" name="top_Manager"   value="Yes">Yes</label><label class="form-radio form-normal form-text form-success active"><input type="radio" name="top_Manager" checked="checked"  value="No">No</label>
                     </div>
                </div>
                  </div>
              </div>
            </div>
      </div>
</div>

如果我为两个字段都添加了 class="form-group" 标签，那么问题就会得到解决，但是 "Manager" 字段会滑到我不想要的下一行。

有什么想法吗？

Answer 1

在您的验证脚本代码中，设置自定义错误选择器，例如行：'.col-sm-4'，这样它将覆盖默认错误 class .has-error .form-control 并且仅针对选择器包含必需的输入字段。

fields: {
    pro_LoggedByName: {
        row: '.col-sm-4', //<----This is custom error selector
        validators: {
            notEmpty: {
                message: 'The city is required'
            }
        }
    }
}

More Information & Reference

Fiddle

formvalidation.io Bootstrap 设计的验证问题

formvalidation.io validation issue with Bootsrap design

bootstrap-modal

formvalidation-plugin