我正在使用 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;
}
最佳答案
您的示例代码使用 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>');
您应该在成功时应用上面的 javascript 调用:
个人应该更喜欢添加图像而不是标签。
关于jquery - 使用 Bootstrap 和表单验证 - 在输入字段的右侧获取刻度图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19447353/