在bootsrap文本框旁边显示Jquery表单验证消息

Question

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

这是我的html代码：

<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>

我的JS代码是

var validator = $("#sjform").validate({
    rules: {
        txtname: "required"

    },
    messages: {
        txtname: "Required"
    },
    errorPlacement: function (error, element) {
    //    error.appendTo($(element).parent().next());
    error.insertAfter(element);
    },

    //highlight: function (element) {
    //    $(element).closest('.form-group').addClass('has-error');
    //},
    //unhighlight: function (element) {
    //    $(element).closest('.form-group').removeClass('has-error');
    //},
    highlight: function (element) {
        $(element).parent().removeClass('has-success').addClass('has-error');
    },
    unhighlight: function (element) {
        $(element).parent().removeClass('has-error').addClass('has-success');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    submitHandler: function (form) {
        form.submit();
    }
});

开发人员请提供任何帮助。

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>

因此，添加额外的“行” +两个div包装器，并根据需要调整其宽度。 例如，我将col-md更改为col-xs，以确保它们始终在每种分辨率下浮动。

工作演示