使用 Bootstrap 和表单验证 - 获取输入字段右侧的刻度图像答案

【问题标题】：Using Bootstrap & form validation - getting the tick image to right of the input field使用 Bootstrap 和表单验证 - 获取输入字段右侧的刻度图像
【发布时间】：2013-10-18 10:25:47
【问题描述】：

我正在使用 Bootstrap 3 框架和 jQuery 验证插件通过在每个表单字段的右侧直接显示一个“绿色勾号”图像来显示表单字段上的错误 - 它只是在字段下方显示图像而不是比右边。

我正在尝试在此演示中模拟以下表单 http://alittlecode.com/files/jQuery-Validate-Demo/index.html

<div class="col-xs-10">
  <div class="form-group">
    <label for="inputFirstName" style="display: none;">First Name</label>
    <?= form_input('first_name', '', "id='first_name' class='form-control {$error}'"); ?>
  </div>
  <div class="form-group">
    <label for="inputLastName" style="display: none;">Last Name</label>
    <?= form_input('last_name', '', "id='last_name' class='form-control {$error}'"); ?>
  </div>                    
</div>

我的 CSS/JS 如下：

<script type="text/javascript" src="/assets/js/includes/jquery.validate.min.js"</script>
<script type="text/javascript">
$(document).ready(function () {

$('#checkout-form').validate({
    rules: {
        first_name: {
            minlength: 2,
            required: true
        },
        email: {
            required: true,
            email: true
        }
    },
    highlight: function (element) {
        $(element).closest('.control-group').removeClass('success').addClass('error');
    },
    success: function (element) {
        element.text('OK!').addClass('valid')
            .closest('.control-group').removeClass('error').addClass('success');
    }
});

});
</script>
<style type="text/css">
   label.valid {
  width: 16px;
  height: 16px;
  background: url('/assets/images/icons/tick.png') center center no-repeat;
  display: inline-block;
  text-indent: -9999px;
 }
 label.error {
 font-weight: bold;
 color: red;
 padding: 2px 8px;
 margin-top: 2px;
 }

【问题讨论】：

标签： jquery css validation twitter-bootstrap-3

【解决方案1】：

您的示例代码使用 Twitter 的 Bootstrap 2，而您使用的是 Twitter 的 Bootstrap 3。自 TB3 以来，表单的结构发生了变化，请参阅。

我认为水平形式最适合您的需求http://getbootstrap.com/css/#forms-horizontal。注意标签和输入默认不内联（见：Forcing label to flow inline with input that they label）

您来自http://alittlecode.com/files/jQuery-Validate-Demo/index.html 的示例代码为输入添加了第二个标签并在其上应用背景。您的代码没有添加第二个标签并将背景应用于隐藏元素？（我不明白）

对 Twitters Bootstrap 3 的水平表单执行相同操作的示例：http://bootply.com/88601

html

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
    <div class="col-lg-9">
      <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
    <div class="col-lg-9">
      <input type="email" class="form-control" id="inputEmail2" placeholder="Email">
    </div>
  </div>
    <div class="form-group">
    <label for="inputEmail3" class="col-lg-2 control-label">Email</label>
    <div class="col-lg-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
</form>

css

  label.valid {
  width: 16px;
  height: 16px;
  background: url('//alittlecode.com/files/jQuery-Validate-Demo/assets/img/valid.png') center center no-repeat;
  display: inline-block;
  text-indent: -9999px;
 }

javascript

$('#inputEmail1').closest('.form-group').append('<div class="col-lg-1"><label class="valid">OK!</label></div>');
$('#inputEmail2').closest('.form-group').append('<div class="col-lg-1"><img src="http://alittlecode.com/files/jQuery-Validate-Demo/assets/img/valid.png" alt=">>OK!"></div>');

您应该在您的success: 上应用上面的 javascript 调用，个人应该更喜欢添加图像而不是标签。

【讨论】：