Making radio button as a required field using bootstrap

Question

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

Answer 1

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.