required field
来源:互联网 发布:1024控台控制帕灯编程 编辑:程序博客网 时间:2024/06/06 05:29
Making radio button as a required field using bootstrap
I am creating login page using bootstrap, here is my code
<form class="form-signin" action="firstLogin.action" method="post"> <h2 class="form-signin-heading">Please sign in</h2> <input type="text" class="form-control" name="username" placeholder="User Name" required="required" autofocus> <br> <input type="password" class="form-control" name="password" required="required" placeholder="Password"> <br> <div class="btn-group" data-toggle="buttons-radio"> <button type="button" class="btn btn-primary" style="width: 150px">Admin</button> <button type="button" class="btn btn-primary" style="width: 150px">User</button> </div> <div><br></div> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> </form>
I want to make radio button field as required field . any idea how to do it.?
2 Answers
I got it!
All you need to do is
-create two divs, one for data-toggle and child her with btn-group
Therefore, you get a group of buttons with a radio inside. set those radio btns to
class="sr-only"
<form class="form-signin" action="firstLogin.action" method="post"> <h2 class="form-signin-heading">Please sign in</h2><input type="text" class="form-control" name="username" placeholder="User Name" required autofocus><br><input type="password" class="form-control" name="password" required placeholder="Password"><br> <div data-toggle="buttons"> <div class="btn-group"> <label class="btn btn-primary"> <input type="radio" name="type" id="type" value="admin" class="sr-only" required>Admin </label> <label class="btn btn-primary"> <input type="radio" name="type" id="type" value="user" class="sr-only" required>User </label> </div> </div> </div><br><button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
http://jsfiddle.net/nteb4/23/
It's working on bootstrap3
In order to make input required, the element must be an input element. Change your buttons to inputs, give them a name, add required, and change the type to 'radio', and required should work (see this fiddle):
<div> <input type="radio" name="radio-choice" required>Admin</input> <input type="radio" name="radio-choice" required>User</input> </div>
Unfortunately this means they don't look like cool buttons anymore. You can style radio buttons to look like what you want, and required will still stop the form from submitting, but you won't see the popup warning to select an option (see this fiddle).
So, for what you want, it looks like you'll have to do some basic programming. Here's a fiddle with a basic check in place using your original buttons.
- required field
- Required field 'sessionHandle is unset !’
- [doc=null] missing required field: id
- [异常]No ValidatorAction named required found for field name
- Redmine Tricks (1) How to make Target Version field required?
- Input-Attr:Required field,关于html5的一些有趣知识
- Field XX required a bean of type 使用@componentscan 解决
- hive2中使用beeline:Required field 'serverProtocolVersion' is unset!
- APXTADTC - Tax Authority Field is Required Although Option "Create Withholding Invoice" is Never
- SharePoint 2010 Error: You must specify a value for this required field
- u.aly.dh: Required field 'client_stats' was not present! Struct: UALogEntry(client_stats:null, app_i
- Java 连接hive2 server 通过jdbc 出现了问题 Required field 'client_protocol' is unset! Struct:TOpenSessionReq
- ButterKnife 报Required view 'hello' with ID 2131427413 for field 'hello' was not found
- Hive学习笔记 --- Required field 'sessionHandle' is unset! Struct:TExecuteStatementReq(sessionHan
- Caused by: java.lang.IllegalStateException: Required view 'descriping' with ID 2131558573 for field
- 解决java使用jdbc连接hive2出现Required field 'client_protocol' is unset! Struct:TOpenSessionReq
- java.lang.IllegalStateException: Required view 'nav' with ID 2131558567 for field
- mybatis Field xxxMapper in xxxx required a bean of type 'XXXMapper' that could not be found.
- nginx+tomcat+redis 负载均衡和session共享
- 【实战-Linux】--搭建CA认证中心实现https取证
- Tomcat怎么安装SSL证书方法教程(自主csr版)进阶篇(一)
- Spring事务配置
- codevs 1173 最优贸易 2009年NOIP全国联赛提高组(spfa)
- required field
- Makefile依赖关系中的竖线“|”
- 天天快递电子面单接口对接说明及案例
- Web前端面试指导(完结)
- 数据结构专题——线段树
- 11.2考试整理
- Java设计模式学习08——组合模式
- qualcomm平台的camera架构
- RAC是一种并行模式