required field

Making radio button as a required field using bootstrap

up vote 3 down vote favorite

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.? twitter-bootstrap share improve this question edited Feb 27 '14 at 7:35 asked  Feb 19 '14 at 13:17 Ajinkya 46 1 10

You could just check if it is empty or not, in case of empty stop to going further, if not check format, type of data... and go on –  Llopis  Feb 19 '14 at 13:18 Thanks .. but can we do it as <input type="text" class="form-control" name="username" placeholder="User Name" required="required"> stackoverflow.com/users/2886003/llopis –  Ajinkya  Feb 19 '14 at 13:20  add a comment

2 Answers

active oldest votes

up vote 5 down vote accepted

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 share improve this answer edited Mar 5 '15 at 14:40 Abzoozy 520 5 19 answered  May 19 '14 at 5:07 housecarl 92 1 4

1   it doesnt work unless you select "user" if you click on "admin" doesnt let you submit the form –  jpganz18  Jan 7 '15 at 10:35 @jpganz18 fixed now –  Abzoozy  Mar 5 '15 at 16:50 add a comment

up vote 5 down vote

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. share improve this answer edited Feb 19 '14 at 17:52 answered  Feb 19 '14 at 17:30 ringstaff 1,540 1 7 21

I know this .. but im asking about can we do it as im saying, by using bootstrap radio buttons. –  Ajinkya  Feb 20 '14 at 7:42  YES it works great using bootstrap too i recently used it and is working with just a simple required attribute –  TaraGurung  Nov 25 '15 at 8:23 I wish I could vote twice here. This answer is so much simpler than the other popular answer. –  Brian Ruff  Feb 23 at 22:42