required field

最新推荐文章于 2022-03-03 20:55:49 发布

screaming

最新推荐文章于 2022-03-03 20:55:49 发布

阅读量1.6k

点赞数

分类专栏： CSS Bootstrap

CSS 同时被 2 个专栏收录

2 篇文章

订阅专栏

Bootstrap

1 篇文章

订阅专栏

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

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

edited Mar 5 '15 at 14:40

Abzoozy

520 5 19

answered May 19 '14 at 5:07

housecarl

92 1 4

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.

edited Feb 19 '14 at 17:52

answered Feb 19 '14 at 17:30