The "required" validation is working for form
<!DOCTYPE html>
<html>
<body>
<form action=''>
<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>
</body>
</html>
but is not working for the same form if I move the option with empty value down the list.
<!DOCTYPE html>
<html>
<body>
<form action=''>
<select required>
<option value="volvo">Volvo</option>
<option value="saab" >Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="">None</option>
</select>
<input type="submit">
</form>
</body>
</html>
Why?
How exactly does the select element validation work?
Referred to the following: https://www.w3schools.com/tags/att_select_required.asp
The following is from w3 docs:
The required attribute is a boolean attribute. When specified, the
user will be required to select a value before submitting the form.
...
if the value of the first option element in the select element's
list of options (if any) is the empty string
...
Which means that the required attribute works only if the value of the first element is empty
It's not an issue with Select2 but with the way browser work with select tag. By default, the first option is selected by the browser.
So, in the first case "None" option is selected and hence your validation catch the error because the first option value is null.
In the second, case the first option is not null. Hence there is no validation error in this case.
To correct it, add an empty option with an empty value and set the attribute as selected disabled
Demo: https://jsfiddle.net/rLmztr2d/2909/
HTML:
<form>
<select required id="example">
<option disabled selected></option>
<option value="volvo">Volvo</option>
<option value="saab" >Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="">None</option>
</select>
<input type="submit">
</form>
JS:
$('#example').select2();
Related
I have created a dropdown menu in html. I have a reset button which resets all the value to null. But on clicking this I need to reset the dropdown menu to the first value which I gave in the field.
Please help...
The code for the dropdown is as below.
<select name="abc" id="abc">
<option value="one">One
<option value="two">Two
</select>
But on clicking Reset I am getting a blank in the dropdown list from where i have to again select either One or Two.
Instead I want it to automatically set to the value "One".
You can use add the attribute selected to the option you want to be default like this:
<select name="abc" id="abc">
<option value="one">One</option>
<option value="two" selected>Two</option>
</select>
Or add selected="selected":
<select name="abc" id="abc">
<option value="one" selected="selected">One</option>
<option value="two">Two</option>
</select>
You just need to use the selected attribute for the item that you want to be the default:
<select name="abc" id="abc">
<option value="one" selected="selected">One</option>
<option value="two">Two</option>
</select>
If you are manually performing the reset, you'll likely want to store a reference to the current selection prior to resetting them and using that to retain the previous selection, which you can access via the selectedIndex property. Depending on your use case and technology (e.g. jQuery, etc.), you can select a specific element by its index, value, or potentially other attributes.
You can add selected attributes to make default select.
<select name="abc" id="abc">
<option value="one">One
<option value="two" selected="selected">Two
</select>
With jquery
$("#abc").val("two")
use selected
here live example https://www.w3schools.com/tags/att_option_selected.asp
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
I think you need this code in your reset jquery function.
$("#abc option:selected").prop("selected", false);
$("#abc option:first").prop("selected", "selected");
HTML select drop down by default shows first option if none of the option is selected. So, effectively you just need to clear the selected attibute for your dropdown.
function clearForm(form) {
//var $f = $(form);
//var $f = $f.find(':input').not(':button, :submit, :reset, :hidden');
//$('#msg').empty();
$('#abc option:selected').removeAttr('selected');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="abc" id="abc">
<option value="one">One
<option value="two" selected>Two
</select>
<input type='button' class="btn btn-primary" value='Reset' name='reset' onclick="return clearForm(this.form);">
I have a html form which has a dropdown consisting of a few values. If the user does not select an option and moves to the next field, I need to give an error message. I have used the required attribute but it does not fire in Chrome and Firefox.
This is my code :
<select name="gender" id="gender" style="max-width:100%" required>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
The required attribute does not work on Chrome and Firefox. A JavaScript solution would also be good. At the time of submitting the data I am checking for empty fields but I would like to display an error message if the user does not select a value from the dropdown and moves to the next field.
Use below code, not need any script, use form tag
<!DOCTYPE html>
<html>
<body>
<form>
<select required>
<option value="">None</option>
<option value="demo">demo</option>
<option value="demo1">demo1</option>
<option value="demo2">demo2</option>
<option value="demo3">demo3</option>
</select>
<input type="submit">
</form>
</body>
</html>
Try using the onfocusout option on your select paired with some Javascript.
HTML
<select name="gender" id="gender" onfocusout="check()" style="max-width:100%" required>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
JS
function check(){
var x = document.getElementById("gender").selectedOptions[0].label;
if(x == "Select Gender"){
alert("Please select an option.");
}
}
CodePen.io: https://codepen.io/anon/pen/XQxQgw
There's undoubtedly a more efficient way of doing this and you would need to tweak the JS to check if all fields have been completed etc. but that's my two cents in a pinch!
I got a problem when I'm validating this. I can't understand how do I fix it?
<Label for="religion">Select Your Religion</Label>
<select required class="form-control" id="religion">
<option disabled>Select Your Religion</option>
<option value="hindu">Hindu</option>
<option value="muslim">Muslim</option>
<option value="christian">Christian</option>
<option value="buddhist">Buddhist</option>
<option value="other">Other</option>
</select>
Here is the problem I'm getting on https://validator.w3.org/nu :
The first child option element of a select element with a required attribute, and without a multiple attribute, and without a size attribute whose value is greater than 1, must have either an empty value attribute, or must have no text content. Consider either adding a placeholder option label, or adding a size attribute with a value equal to the number of option elements.
The name attribute is missing for your select option
Also, the select option should have value=""
<Label for="religion">Select Your Religion</Label>
<select required name="religion" class="form-control" id="religion">
<option value="">Select Your Religion</option>
<option value="hindu">Hindu</option>
<option value="muslim">Muslim</option>
<option value="christian">Christian</option>
<option value="buddhist">Buddhist</option>
<option value="other">Other</option>
</select>
Like the validator message says
...must have either an empty value attribute, or must have no text content...
Make sure your option has an empty value, like <option disabled value="">
<Label for="religion">Select Your Religion</Label>
<select required class="form-control" id="religion">
<option disabled value="">Select Your Religion</option>
<option value="hindu">Hindu</option>
<option value="muslim">Muslim</option>
<option value="christian">Christian</option>
<option value="buddhist">Buddhist</option>
<option value="other">Other</option>
</select>
<form action="/xyz.jsp">
<select required>
<option selected disabled hidden>Select one of your active items...</option>
<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>
The issue here is, when I specify require it does not act properly because the first field is selected.. it ends up producing NULL instead of actually requiring user to enter a choice...
Anything I can do to fix this?
It is because you have to make the first option value the empty string. You will have to come with another value for your "none" option.
See also Can I apply the required attribute to <select> fields in HTML5?
This is pure HTML.
<form action="/xyz.jsp">
<select required>
<option value="" selected hidden>Select one of your active items...</option>
<option value="none">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>
i see there is a disabled property on a specific item in the dropdown list but is there an enabled property on the whole html dropdown itself?
any suggestions?
According to the HTML 4 spec a select element has a disabled attribute.
So
<select disabled>
<option>Something</option>
</select>
should work
disabled="disabled"
This will disable a value within the combo box (it will still show up, but it will not have the ability to be selected):
<select>
<option disabled="disabled" value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
This will disable the whole combo box:
<select disabled="disabled">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
may this will help
is same as :
<html>
<head>
<script type="text/javascript">
function makeDisable(){
var x=document.getElementById("mySelect")
x.disabled=true
}
function makeEnable(){
var x=document.getElementById("mySelect")
x.disabled=false
}</script></head><body><form>
<select id="mySelect"><option>Apple</option><option>Banana</option>
<option>Orange</option>
</select>
<input type="button" onclick="makeDisable()" value="Disable list">
<input type="button" onclick="makeEnable()" value="Enable list">
</form>
</body>
</html>