So, I've got following code for a dropdown box made with bootstrap:
<div class="btn-group">
<button id="landKapitein" type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Land
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a role="menuitem" tabindex="-1" href="#">België/Belgique</a></li>
<li><a role="menuitem" tabindex="-1" href="#">Deutschland</a></li>
<li><a role="menuitem" tabindex="-1" href="#">France</a></li>
<li><a role="menuitem" tabindex="-1" href="#">Nederland</a></li>
<li><a role="menuitem" tabindex="-1" href="#">United Kingdom</a></li>
</ul>
</div>
Now I want to make it required to select something from this dropdown box before you can continue on. I've already done this for textboxes and radio buttons by just adding required to the tag, but I don't have a tag like that here, so how do I do this then?
If we just put required in select tag and <option value="">None</option> in the option it will work for validation. I have refer this page.
It works for selection must be made among provided value.
But I would like to know how to write custom validation message coming by default like this message.?
<form action="demo_form.asp">
<select required>
<option value="">None</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
Above code works fine for validation like "Selecting an item in the list before submit".
Use this code if you want to required Bootstrap drop down select
<select id='terms' class='form-control' required>
<option selected disabled>Select </option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
Could you just use a select element instead and apply required to its tag?
<select class="form-control" required>
<option>België/Belgique</option>
<option>Deutschland</option>
<option>France</option>
<option>Nederland</option>
<option>United Kingdom</option>
</select>
See this SO question in particular.
In CSS:
.btn.btn-default.dropdown-toggle.is-invalid {
border-color: #dc3545;
}
In HTML:
<input type="hidden" class="form-control" name="idType" required />
<div class="btn-group">
<button id="landKapitein" type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Land
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a role="menuitem" tabindex="-1" href="#">België/Belgique</a></li>
<li><a role="menuitem" tabindex="-1" href="#">Deutschland</a></li>
<li><a role="menuitem" tabindex="-1" href="#">France</a></li>
<li><a role="menuitem" tabindex="-1" href="#">Nederland</a></li>
<li><a role="menuitem" tabindex="-1" href="#">United Kingdom</a></li>
</ul>
</div>
In JavaScript: set the value of the input field on selecting the dropdown.
<select class="form-control" required="required">
<option>A</option>
<option>A</option>
<option>A</option>
</select>
please set required = "required" in your selector
Related
In the following code, I want to submit a form with a Bootstrap dropdown and submit the selected value as "username". I'm not sure where in the following code I should add 'name="username"'. When I add it in certain places, it does not get set properly.
<form action="/login" method="POST">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
<input type="submit" value="Login">
</div>
</form>
Below is an example of code that does exactly what I want it to. But for design purposes, I'd like the form to be in Bootstrap.
<form action="/login" method="POST">
<select class="form-control" name="username">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<input type="submit" value="Login">
</form>
Replace the links in the list (the ones that currently link to the top of the page) with radio buttons and labels.
We can add radio buttons for every list item, each giving them a unique value and name="username". Wrap the text of every list item into a label with a for tag that points to the id of the corresponding radio button.
After that, the only thing that is left to do is wrapping the dropdown label into a span with id='userlabel', and use this script to change the label of the dropdown menu to the selected list item. This will give the user an idea of which item is currently selected:
$("input[name='username']").change(function(e){
$("#usernamelabel").text($(this).val());
});
We can hide the radio buttons with
input[name='username']{
display: none;
}
The resulting html will look like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form action="/login" method="POST">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span id="usernamelabel">Select username</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><input type="radio" id="username1" name="username" value="username1"><label for="username1">Username1</label></li>
<li><input type="radio" id="username2" name="username" value="username2"><label for="username2">Username2</label></li>
<li><input type="radio" id="username3" name="username" value="username3"><label for="username3">Username3</label></li>
</ul>
<input type="submit" value="Login">
</div>
</form>
<style>
input[name='username']{
display: none;
}
</style>
<script>
$("input[name='username']").change(function(e){
$("#usernamelabel").text($(this).val());
});
</script>
I'm working on fixing this piece of code that creates this searchable combobox. I'm using a jQuery plugin called bootstrap select and I'm just trying to add some HTML elements so it can be properly read by the screen reader (using Mac VoiceOver).
I had gone thru many iterations using aria attributes, roles and others. The following code is the best iteration of it.
<div class="btn-group bootstrap-select form-control input-sm uif-multiSelectControl required validChar-document.developmentProposal.ownedByUnitNumber0 advanced_select" aria-required="true">
<button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="uk9itrp_control" title="select" role="combobox" aria-label="Lead Unit" aria-haspopup="true"><span class="filter-option pull-left">select</span> <span class="caret"></span></button>
<div class="dropdown-menu open" style="max-height: 221px; overflow: hidden; min-height: 40px;">
<div class="bootstrap-select-searchbox">
<input id="to_fix_krad_bug" name="to_fix_krad_bug" type="text" class="input-block-level form-control valid dirty" role="combobox" aria-owns="results_jx1xgk">
</div>
<ul class="dropdown-menu inner selectpicker" role="combobox" id="results_jx1xgk" style="max-height: 169px; overflow-y: auto; min-height: 0px;">
<li rel="0" class="selected hide" role="option"><a tabindex="0" class="" style=""><span class="text">select</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="1" role="option" class=""><a tabindex="0" class="" style=""><span class="text">000001 - University</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="2" role="option" class="hide"><a tabindex="0" class="" style=""><span class="text">AA-AAAA - Unit A/span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
<li rel="3" role="option" class="hide"><a tabindex="0" class="" style=""><span class="text">BB-BBBB - Unit B</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
</ul>
</div>
</div>
When the combobox is focused (which focuses on the button) it's now properly reading it as a combobox and its label. Once you go on that, it doesn't appear to recognize the elements of the list. I tried adding aria-labelledby to the li elements but didn't had any luck.
I'm also using aria-owns on the input where the focus goes when you open the combobox so it get linked with the list.
I cannot move a lot this html since it's a plugin and I'm just trying to add attributes and make it accesible. Suggestions?
So I just bought this theme "My City", and it's bootstrap based. The problem is that it has a search box, with a dropdown button next to it. I want it to be a select instead of a button. Currently if I simply change from to it will not be in the input group anymore and it will not be bounded to the search box. Here you can see a preview of the theme.
You can see a dropdown with "Market" typed on it. It currently is a dropdown, but I want it to be a select.
Here is the input group's code:
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn btn_cat">
<button type="button" class="btn btn-default dropdown-toggle" datatoggle="dropdown" aria-expanded="false">
<span><i class="fa fa-shopping-cart"></i>Market<span class="caret"></span></span>
</button>
<ul class="dropdown-menu dropdown-menu-right place_dd" role="menu">
<li><a class="cinema"><i class="fa fa-film"></i>Cinema</a></li>
<li><a class="club"><i class="fa fa-beer"></i>Club</a></li>
<li><a class="cafe"><i class="fa fa-cutlery"></i>Cafe</a></li>
<li><a class="sport"><i class="fa fa-futbol-o"></i>Sport</a></li>
<li><a class="port"><i class="fa fa-life-ring"></i>Port</a></li>
<li><a class="bank"><i class="fa fa-university"></i>Bank</a></li>
<li><a class="post"><i class="fa fa-envelope-o"></i>Post</a></li>
<li><a class="showplace"><i class="fa fa-eye"></i>Showplace</a></li>
<li><a class="park"><i class="fa fa-leaf"></i>Park</a></li>
</ul>
</div>
<div class="input-group-btn btn_promo_search">
<button type="button" class="btn btn-success">Search</button>
</div>
</div>
The mark-up in your html is incorrect.
Basic markup for select looks like this.
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
I hope this helps.
I want to build search bar similar to amazon site.
A select input field followed by input field followed by search button.
this is what I have got so far:
The issue is that the button1 dropdown is not a select input field if I do change to input field everything breaks.
examples in bootstrap site dont show group with input field select but dropdown menu.
my code
<div class="input-group input-group-lg">
<input type="text" name="query" class="form-control" placeholder="Search this site" />
<span class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle custom" data-toggle="dropdown">Button 1 <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
<button class="btn btn-primary" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
css - to remove curve radius for center input field or buttons
.custom{
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
}
Please have look at my demo. If you want add your style then add class to components to change there style.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Apps & Games <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
</div>
</div>
</div>
I got it solved just amazon like search using this:
<div class="input-group my-group">
<select id="filter_type" name="filter_type" class="selectpicker form-control" style="width:30%;">
<option value>Select Filter Type..</option>
<option value="all">All</option>
<option value="firstname">First Name</option>
<option value="lastname">Last Name</option>
<option value="email">Email</option>
</select>
<select id="search" name="search" class="selectpicker form-control" disabled="disabled" style="width:70%; display:block;">
<option value>select filter type first</option>
</select>
<input type="text" class="form-control" style="width:70%; display:none" name="searchfield" id="searchfield" placeholder="Enter username...">
<span class="input-group-btn">
<button id="submit" name="submit" class="btn btn-primary" disabled="disabled" type="submit">Filter</button>
</span>
</div>
Just right click the amazon search bar and check out the code behind.
I am trying to create a dropdown menu using select with a value/options. How can I do this using Bootstrap?
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="type" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Please Select
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="type">
<li>General User</li>
<li>Service Provider</li>
<li role="separator" class="divider"></li>
<li>Admin</li>
</ul>
</div>
For form components such as select bootstrap use .form-control, see docs here and see select docs example here
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<select class="form-control">
<option value="General User">General User</option>
<option value="Service Provider">Service Provider</option>
<option value="Admin">Admin</option>
</select>