在Bootstrap 4上显示JavaScript验证错误"btn-group-toggle",可以按照以下步骤进行操作:
以下是一个示例代码:
HTML:
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Option 1
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Option 2
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Option 3
</label>
</div>
JavaScript:
// 假设这里是验证逻辑
var isValid = false;
if (!isValid) {
$('.btn-group-toggle').addClass('has-error');
$('.btn-group-toggle').attr('data-toggle', 'tooltip');
$('.btn-group-toggle').attr('data-placement', 'top');
$('.btn-group-toggle').attr('data-content', 'Validation error message');
$('[data-toggle="tooltip"]').tooltip();
}
CSS:
.has-error {
background-color: #f2dede;
border-color: #ebccd1;
}
/* 可选:自定义工具提示样式 */
.tooltip {
background-color: #f2dede;
color: #a94442;
}
请注意,以上代码仅为示例,你可以根据实际需求进行修改和扩展。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。你可以在腾讯云的官方网站上找到这些产品的详细介绍和文档。
腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm 腾讯云云数据库MySQL:https://cloud.tencent.com/product/cdb_mysql
领取专属 10元无门槛券
手把手带您无忧上云