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

Question

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

这是我的 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

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

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

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

working demo

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

Show Jquery Form Validation message Next to bootsrap Textbox

html

jquery

jquery-validate

twitter-bootstrap