CODEWITHSUNDEEP
twitter-bootstrap
Ajinkya
Ajinkya

Reputation: 111

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

Upvotes: 7

Views: 44210

Answers (2)

user3603692
user3603692

Reputation:

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

Upvotes: 7

ringstaff
ringstaff

Reputation: 2325

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.

Upvotes: 17

Related Questions