Using "required" on a dropdown form element with a "disabled" selection works in Firefox to prevent users from submitting a form without selecting something from the dropdown list, but not in Chrome. Can you help?
<select id="topic" class="form-control" required="required">
<option disabled selected>select genre</option>
<option>All genres (whatever works)</option>
<option>boogers</option>
<option>cheese</option>
<option>dumplings</option>
</select>
This may work
<option selected="true" disabled="disabled">select genre</option>
src: How to show disable HTML select option in by default?
To get it working just add value="" to your default option. This answer provides some HTML5 documentation on the matter.
Can I apply the required attribute to <select> fields in HTML5?
Related
Does dropdown element support "required=true" attribute? I have a usecase where I want users to compulsorily select a dropdown option, but by default I don't not want to prompt any of the options.
If not, why not?
Yes, it does have required attribute. See below snapshot.
<form>
<select required="required">
<option value="">None</option>
<option value="Test1">Test1</option>
<option value="Test2">Test1</option>
</select>
<input type="submit">
</form>
Documentation
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
I have a dropdown in an Angular 2 project:
<div class="form-group">
<label for="vendors">Vendors</label>
<select class="form-control" id="vendor_id" name="vendor_id" [(ngModel)]="selectedVendor" (ngModelChange)="onVendorChange($event)" required>
<option *ngFor=" let vendor of vendors " [ngValue]="vendor"> {{vendor.business_name}} </option>
</select>
</div>
This works fine in Chrome, but when I open it in Safari, when the page is loaded it shows the first item as selected even if I didn't selected anything. However, if I click "Submit" it will show "This field is mandatory".
In Safari it shows the first item as selected, but actually it's not selected. How to fix this?
In fact, you may find that the accepted answer is insufficient. At least using Angular 5 and Safari, I have found that you must explicitly make the option undefined. In other words:
<option disabled selected value=undefined> --Select-- </option>
Otherwise, the option will simply be marked as disabled and Safari will continue to show that it has the first real option selected, when in fact it isn't (and can't be).
This is not an angular issue, this is the default behavior on safari/mobile safari. An easy solution/workaround is shown below.
If you add another option box such as:
<option disabled selected value> --Select-- </option>
Then your code becomes:
<div class="form-group">
<label for="vendors">Vendors</label>
<select class="form-control" id="vendor_id" name="vendor_id" [(ngModel)]="selectedVendor" (ngModelChange)="onVendorChange($event)" required>
<option disabled selected value> --Select-- </option>
<option *ngFor=" let vendor of vendors " [ngValue]="vendor"> {{vendor.business_name}} </option>
</select>
</div>
This way you cannot re-select the first "Select" box after the user has made a valid selection, answer taken from this answer.
With input of type text the attribute required is available. It is not the case for select inputs. So how to make them required ?
FIDDLE
<form>
<select required>
<option></option><!--If this is selected require pop up will appear -->
<option>test</option><!--If this is selected form will be submitted -->
</select>
<input type="submit">
</form>
You can make them required by using html5 attribute required just like below.
<select required>
<option value="">select an option</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
</select>
View Example in jsfiddle http://jsfiddle.net/88rXX/
Set a default value then on form submission check to see if that default value has changed.
If you're using the JQuery validation plug-in, try this Validate select box
You do have to remember though that just because it's validated client side, doesn't mean you shouldn't also check server side.
use it based on html 5. otherwise you can use any plugin
I have the following code ;
<label for="courseLevel">Level</label>
<select name="courseLevel" id="courseLevel">
<option label="courseLevel">Foundation</option>
<option label="courseLevel">Undergraduate</option>
<option label="courseLevel">Postgraduate</option>
</select>
In firefox and chrome i get "Foundation","Undergraduate","Postgraduate" as the options. In internet explorer i get "courseLevel","courseLevel","courseLevel". Why? and how can it be fixed?
label is not being used correctly (only IE 7+ and Opera support it). You don't need it.
<label for="courseLevel">Level</label>
<select name="courseLevel" id="courseLevel">
<option>Foundation</option>
<option>Undergraduate</option>
<option>Postgraduate</option>
</select>
What you are probably looking for is value. For example, you could assign numeric values to each of the options like so:
<label for="courseLevel">Level</label>
<select name="courseLevel" id="courseLevel">
<option value='0'>Foundation</option>
<option value='1'>Undergraduate</option>
<option value='2'>Postgraduate</option>
</select>
However, you don't need them. When no values are specified, the text between <option> and </option> will be used.
option tags don't need a label attribute. It might be the cause of this problem.
because firefox ignores the label elements assigned to each option.
http://www.w3schools.com/TAGS/att_option_label.asp , http://www.w3schools.com/TAGS/tag_option.asp
seems like only IE7+ and Opera supports this tag
The label attribute is only supported by IE/Opera and will replace the option's innerText value.
Your XHTML is wrong.
You actually want <option value=""> tags; the label property makes no sense there. Furthermore, each value of an <option> tag should be unique. The label tag is correct there, since it corresponds to the id of the <select> tag and will make the drop-down menu appear when the 'Level' text is clicked.
<label for="courseLevel">Level</label>
<select name="courseLevel" id="courseLevel">
<option value="1">Foundation</option>
<option value="2">Undergraduate</option>
<option value="3">Postgraduate</option>
</select>
How implement subj?
when i write:
<form>
<select>
<option value="0">aaaa</option>
<option value="1">bbbb</option>
</select>
</form>
then default selected item is "aaaa"
when i write:
<form>
<select>
<option value=""></option>
<option value="0">aaaa</option>
<option value="1">bbbb</option>
</select>
</form>
then default selected item is blank, but this blank item presents in drop down.
how i can implement SELECT tag with default blank value that hidden in dropdown list?
Just use disabled and/or hidden attributes:
<option selected disabled hidden style='display: none' value=''></option>
selected makes this option the default one.
disabled makes this option unclickable.
style='display: none' makes this option not displayed in older browsers. See: Can I Use documentation for hidden attribute.
hidden makes this option to don't be displayed in the drop-down list.
You can by setting selectedIndex to -1 using .prop: http://jsfiddle.net/R9auG/.
For older jQuery versions use .attr instead of .prop: http://jsfiddle.net/R9auG/71/.
Simply using
<option value="" selected disabled>Please select an option...</option>
will work anywhere without script and allow you to instruct the user at the same time.
<select>
<option value="" style="display:none;"></option>
<option value="0">aaaa</option>
<option value="1">bbbb</option>
</select>
Here is a simple way to do it using plain JavaScript. This is the vanilla equivalent of the jQuery script posted by pimvdb. You can test it here.
<script type='text/javascript'>
window.onload = function(){
document.getElementById('id_here').selectedIndex = -1;
}
</script>
.
<select id="id_here">
<option>aaaa</option>
<option>bbbb</option>
</select>
Make sure the "id_here" matches in the form and in the JavaScript.
You can't. They simply do not work that way. A drop down menu must have one of its options selected at all times.
You could (although I don't recommend it) watch for a change event and then use JS to delete the first option if it is blank.
For purely html #isherwood has a great solution. For jQuery, give your select drop down an ID then select it with jQuery:
<form>
<select id="myDropDown">
<option value="0">aaaa</option>
<option value="1">bbbb</option>
</select>
</form>
Then use this jQuery to clear the drop down on page load:
$(document).ready(function() {
$('#myDropDown').val('');
});
Or put it inside a function by itself:
$('#myDropDown').val('');
accomplishes what you're looking for and it is easy to put this in functions that may get called on your page if you need to blank out the drop down without reloading the page.
You can try this snippet
$("#your-id")[0].selectedIndex = -1
It worked for me.