Question

我有一个使用Bootstrap实现的表单，现在使用jquery validate plugin验证表单。验证工作正常但我想在文本框字段旁边显示验证消息，但目前它显示在我的文本框下方。

这是我的HTML代码：

public function actionLogin()
{
   // How to handle post request here?
  // which code i have to use here?
  // My angular get request is successfully work.
  // But Post request not work. How can i manage it?
}

我的JS代码是

<div class="form-group">
  <div class="col-md-2">
   <label for="forTypeName" class="control-label">Trainer Name</label>
  </div>
  <div class="col-md-10">
    <input type="text" class="form-control" id="txtname" name="txtname">
  </div>
</div>

开发帮助请...

Answer 1

我建议您使用嵌套列引导技术，将字段和相应的错误包装在彼此浮动的容器中。

<div class="col-xs-10">
      <div class="row">
          <div class="col-xs-9 field-div">
              <input type="text" class="form-control" id="txtname" name="txtname" />
          </div>
          <div class="col-xs-3 error-div"></div>          
      </div>
  </div>

所以，添加额外的＆＃34;行＆＃34; +两个div包装，并根据您的需要调整宽度。我将col-md更改为col-xs只是为了清楚，以确保它们始终在每个分辨率上浮动。

working demo

显示Jquery表单验证消息在bootsrap Textbox旁边

1 个答案: