I already apply <Required> tag in HTML <Select> but not working. The form is still able to proceed to the next step even not select anything at first step. Anyone know to solve it?
<label>Region :</label>
<select id="Region" class="custom-select form-control" required>
<option value="">Select Region</option>
<option value="central" id="Central">Central</option>
<option value="northern" id="Northern">Northern</option>
</select>
Have you declared your web page using HTML5? Make sure you declare the following statement at the beginning of the page
<!DOCTYPE html>
The required attribute is only available in HTML5 and only supported by specific browsers... w3schools Required Attribute
Having tested your original code in HTML5, it works.
You could get rid of the select option tag entirely, and place the value select option in the select tag itself.
<label>Region:</label>
<select value="Select Option" id="Region" class="custom-select form- control" required>
<option value="central" id="Central">Central</option>
<option value="northern" id="Northern">Northern</option>
</select>
Your code works it depends on the browser you use or the way that you are using it. I wrote a sample code for you. Hope it may help you:
<!DOCTYPE html>
<html>
<body>
<form >
<label>Region :</label>
<select id="Region" class="custom-select form-control" required>
<option value="">Select Region</option>
<option value="central" id="Central">Central</option>
<option value="northern" id="Northern">Northern</option>
</select>
<input type="submit">
</form>
</body>
</html>
So in the code above if you do not choose anything it will not let you submit.
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'm writing a really simple form with 2 text fields and one select. For some reason, the select tag with options doesn't display on my page. I can see the 2 text fields and the label for the the select, but not the select it self.
The app is written in rails and I use materialize.
There might be something too obvious that I don't see it, but after 30mn of thinking, I guess it's fair to put it on SO :)
Thanks
Here's the code:
<form action="/resources" method="post">
<input
type="hidden"
name="authenticity_token"
value="<%= form_authenticity_token %>">
<label for="ressource_name">Ressource Name</label>
<input type="text" id="ressource_name" name="resource[ress_name]" value="<%= #resource.ress_name %>">
<label for="ressource_link">Ressource Link</label>
<input type="text" id="ressource_link" name="resource[link]" value="<%= #resource.link %>">
<label for="categories">Categories</label>
<select id="categories" name="resource[category_id]">
<option value="1">Stuff 1</option>
<option value="2">Stuff 2</option>
<option value="3">Stuff 3</option>
<option value="4">Stuff 4</option>
<option value="5">Stuff 5</option>
<option value="6">Stuff 6</option>
<option value="7">Stuff 7</option>
<option value="8">Stuff 8</option>
</select>
<br>
<input type="submit" value="Post">
</form>
So I put the answer (from Samir) here as well as I guess some other people might come across that issue (it won't change your life, but it might save you some minutes that you want to spend on 'real' issues).
Check the styling! For some reason the select tag was defaulted to {display: none;}
The select tags(likely all select tags) on your page are most likely defaulted to styled to 'display : none' and just in case you cannot find the exact css code that is disappearing the select tag, just cascade the old style by declaring a style attribute on the select element and display it to block. like below
<select style="display: block;">
<option value="" selected>Choose Country</option>
</select>
Consider the following html code
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><strong>Note:</strong> The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>
</body>
</html>
There are a variety of input elements for different specific purposes. For having an optional data-list with the text we replace <input type="text"> with <input list="value">. Now when <input list> tag is written, it is obvious that we are having a data-list. Then why do we need to mention an extra <datalist> tag for encapsulating the option-values? Why haven't all the features of data-list tag been added to input-list tag?
I'm not sure whether I understand the question correctly, but I think the <datalist> as you say is needed because you can add parameters like id=' '. In that case you can later do things with that certain datalist using JavaScript. e.g. using getElementId. Let me know if I answered your question.
I need to create a custom auto-complete list of suggestions for an input field. So far I have associated an event handler to the input event to the html input element, so that when that event triggers, I can fetch the suggestions.
The problem is how would I show these suggestions. By default, input elements can display suggestions, but is it possible to customize/access those suggestions?
If not, what would be the alternatives?
Preferably I would like not to use external libraries.
You may use 'datalist' tag but it doesn't work in IE <= 9
<!DOCTYPE html>
<html>
<body>
<form>
<input list="country" name="countru">
<datalist id="country">
<option value="U.S.">
<option value="France">
<option value="China">
<option value="Cambodia">
<option value="Chile">
<option value="Canada">
<option value="Poland">
</datalist>
<input type="submit">
</form>
</body>
</html>
Run the code and try typing 'C' and then 'a'.
I have 2 selects with same names. One is displayed, and the other is hidden.
<select name="city" style="display: none;">
<option value="notSend">foo</option>
</select>
<select name="city">
<option value="send">foo</option>
</select>
How can I send only select, which are displayed?
You can use HTML disabled attribute to disable <select> and hide that element using Jquery hide method
Example: http://jsfiddle.net/zZTMd/
Note: Don't forget to include JQuery library file
Disable the code which should not be send.
Disable the HTML like this without removing the code:
<!--select name="city" style="display: none;">
<option value="notSend">foo</option>
</select-->
<select name="city">
<option value="send">foo</option>
</select>