BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码

2024-03-22 19:15:52

在某些情况下，反馈图标未正确显示。默认情况下，Bootstrap定义反馈图标位置如下：

.has-feedback .form-control-feedback {
  top: 25px;
  right: 0;
}
.form-horizontal .has-feedback .form-control-feedback {
  top: 0;
  right: 15px;
}

通过自定义值top和right属性，您可以将反馈图标调整为应有的位置。

按钮组

.btn-group .form-control-feedback {
  top: 0;
  right: -30px;
}
 <div class="form-group">
    <label class="col-xs-3 control-label">Gender</label>
    <div class="col-xs-9">
      <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default">
          <input type="radio" name="gender" value="male" /> Male
        </label>
        <label class="btn btn-default">
          <input type="radio" name="gender" value="female" /> Female
        </label>
        <label class="btn btn-default">
          <input type="radio" name="gender" value="other" /> Other
        </label>
      </div>
    </div>
  </div>

输入组、下拉菜单

#productForm .inputGroupContainer .form-control-feedback,
#productForm .selectContainer .form-control-feedback {
  top: 0;
  right: -15px;
}
 <div class="form-group">
    <label class="col-xs-3 control-label">Amount</label>
    <div class="col-xs-3 inputGroupContainer">
      <div class="input-group">
        <span class="input-group-addon">€</span>
        <input type="text" class="form-control" name="amount" />
      </div>
    </div>
  </div>
<div class="form-group">
    <label class="col-xs-3 control-label">Color</label>
    <div class="col-xs-3 selectContainer">
      <select class="form-control" name="color">
        <option value="">Choose a color</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
        <option value="red">Red</option>
        <option value="yellow">Yellow</option>
        <option value="white">White</option>
      </select>
    </div>
  </div>

以上所述是小编给大家介绍的BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

Bootstrap 表单验证formValidation 实现表单动态验证功能

动态添加input并动态添加新验证方式! init状态: 点击"+"后: 验证后: 知识点: 1 先去官网下载:http://formvalidation.io/ 2 导入文件,注意事项我就不多说了在远程验证那篇我已经讲过. 3 用到的关键字:addField.removeField.different 4注意一点就是官网里的例子他们的name是不一样的.我这里比较偷懒.且项目ajax的时候不是用的form表单提交,而是自己并接成json提交,所以x,y的name的名字一样. 好开始:
Bootstrap 表单验证formValidation 实现远程验证功能

最近项目用到了一个很强大的表单验证.记录下.官方地址:http://formvalidation.io/api/ 还有一点很重要:这个插件的Bootstrap最好用他们自带的,有点改动.不用再去Bootstrap官网下载. 向上效果: 先导入资源: <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css" rel="external nofollow" /> &l
实用又漂亮的BootstrapValidator表单验证插件

本文推荐一款twitter做的bootstrapValidator.js,本身bootstrap就是twitter做的,那么使用原配的validator也就更值得信赖.从百度上搜bootstrapValidator会出现很多款,但我只推荐这款: 一.一睹为快为了简便的介绍,这里只做为空的check. BootstrapValidator官方下载地址二.资源引用下载完资源包后,你可以看到如下的目录. 然后把以下三个文件引入到你项目. <link type="text/css"
JS组件Form表单验证神器BootstrapValidator

本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <sc
Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）

本文给大家介绍如何判断表单验证的实例代码,在没给大家介绍正文之前,先给大家介绍下插件. 插件介绍先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用提示中文化: 下载插件后,将\js\bootstrapValidator\language\zh_CN.js 引入文件,即实现中文化提交前验证表单: 更丰富一点的表单验证例子:http://www.jq22.com/yanshi522,直接上代码: <!DOCTYPE h
基于Bootstrap+jQuery.validate实现Form表单验证

基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap Form Template</title>
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码

在某些情况下,反馈图标未正确显示.默认情况下,Bootstrap定义反馈图标位置如下: .has-feedback .form-control-feedback { top: 25px; right: 0; } .form-horizontal .has-feedback .form-control-feedback { top: 0; right: 15px; } 通过自定义值top和right属性,您可以将反馈图标调整为应有的位置. 按钮组 .btn-group .form-control-
基于Bootstrap表单验证功能

基于Bootstrap表单验证,供大家参考,具体内容如下 GitHub地址:https://github.com/chentangchun/FormValidate 使用方式: 1.CSS样式 .valierror { border-color: red !important; } .tooltip.right .tooltip-arrow { border-right-color: #d15b47; } .tooltip-inner { background-color: #d15b47; }
BootStrap表单验证实例代码

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 下面给大家分享bootstrap表单验证实例代码,具体代码如下所示: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@
bootstrap 表单验证使用方法

前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来看看它如何使用吧. 一.源码及API地址介绍它之前,还是给出它的源码以及API的地址吧. bootstrapvalidator源码:https://github.com/nghuuphuoc/bootstrapvalidator boostrapvalidator api:http://bv.do
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑

BootStrapValidator表单验证插件的坑还真不少,又让我碰上一个... BootStrapValidator验证的表单中只可有一个 type="submit" 的按钮. 我这样写了之后 (代码如下) ,点击其它按钮仍会触发验证... 1.错误代码 //示意 <form> ... <button type="submit">提交</button> ... <button>重置</button> &
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑

还是表单验证的问题,发现如果表单内有使用BootStrap-select的下拉选框,在重置表单内容时,会触发对下拉选框的验证,并且验证的提示不会被清除,仍然会存在. 1.HTML结构 <form id="validatorForm"> ... <div class="form-group fieldValue-parDiv valideDiv"> <select name="directPicker" id=&quo
jQuery实现动态表单验证时文本框抖动效果完整实例

本文实例讲述了jQuery实现动态表单验证时文本框抖动效果.分享给大家供大家参考.具体如下: 这里使用jQuery实现的动态表单验证特效,当用户输入错误或没有输入的时候点击提交按钮,有问题的输入框会抖动几下,以提示用户此项有问题,文本框抖动功能都有意思,这个表单比较典型,想实现jquery Ajax表单功能的可以参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-table-txt-check-shake-style-codes
JavaScript实现仿网易通行证表单验证

介绍一下表单验证,不错哦: 如图 CSS代码 @charset "gb2312"; /* CSS Document */ body,dl,dt,dd,div,form {padding:0;margin:0;} #header,#main{ width:650px; margin:0 auto; } .bg{ background-image:url(../images/register_bg.gif); background-repeat:no-repeat; width:6px;

BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码

相关推荐

随机推荐