required field

Making radio button as a required field using bootstrap

up vote3down votefavorite

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

shareimprove this question

edited Feb 27 '14 at 7:35

asked Feb 19 '14 at 13:17 Ajinkya 46110

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

activeoldestvotes

up vote5down voteaccepted

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

shareimprove this answer

edited Mar 5 '15 at 14:40 Abzoozy 520519

answered May 19 '14 at 5:07 housecarl 9214

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 vote5down 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.

shareimprove this answer

edited Feb 19 '14 at 17:52

answered Feb 19 '14 at 17:30 ringstaff 1,5401721

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