Is there a way to invalidate a form if value="0" in my select tag is chosen? The reason I did this is to have a default select option show up before a user see's anything.
But even if a user doesn't choose anything, the form is valid.
<form name="add_task_frm" ng-submit="!add_task_frm.$valid || functiontoUse()" novalidate>
<input type="text" ng-model="name" required />
<select ng-model="action" required>
<option value="0" selected disabled>Choose an Action</option>
<option value="description">See Description</option>
<option value="view">View</option>
</select>
<button type="submit">Submit</button>
</form>
I think you could just remove the value from the first option this should make it invalid if the user does not select anything. However I would recommend changing this implementation to use ng-options.
https://docs.angularjs.org/api/ng/directive/ngOptions
Related
I don't know if this behavior is normal...
<input list="options" onchange="console.log(this.value)" value="datalist"/>
<datalist id="options">
<option value="1" >Foo</option>
<option value="2">Bar</option>
<option value="3">Foo</option>
</datalist>
<input id="test" value="test"/>
When you execute this code, the first input ( which using datalist ), you have to click 3 times quickly to select the word "datalist", but on the second input ( a normal input) you have to click on it 2 times.
When I say I click, I click at the end of the word, just after the last letter!
This is normal ? There is a way to bypass this?
Thanks a lot
Hey so there are a couple of issues in this approach
<input list="options" onchange="console.log(this.value)" value="datalist"/>
<datalist id="options">
<option value="1" >Foo</option>
<option value="2">Bar</option>
<option value="3">Foo</option>
</datalist>
<input id="test" value="test"/>
setting the value to datalist make the datalist always display datalist all the time and not showing any other options the best way to do the thing that you want which i persume is a drop down select is just to use select as follows:
<select class="form-control" name="options" onselect="console.log(this.value)">
<option value="1" >Foo</option>
<option value="2">Bar</option>
<option value="3">Foo</option>
</select>
hope that is helpful.
I have a simple HTML form with a select element. The purpose is this is to use Wordpress's built in query parameters to allow users to sort the posts in an archive. Date Added, Title, etc.
<form action="" method="GET">
<label id="sortLabel" for="orderby">Sort Songs:</label>
<select name="orderby" id="sortbox">
<option disabled selected>Sort by:</option>
<option value="date&order=asc">Oldest First</option>
<option value="date&order=dsc">Newest First</option>
<option value="title&order=asc">Alphabetical (A-Z)</option>
<option value="title&order=dsc">Alphabetical (Z-A</option>
</select>
<input type="submit" value="Filter" />
</form>
The option values are being passed through to the URL fine, but the URLs are encoding, causing the URL to look like this:
www.example.com/songs/?orderby=date%26order%3Dasc
Instead of this:
www.example.com/songs/?orderby=date&order=asc
This is simply how HTML forms work.
The value attributes are arbitrary text. The browser is sending the form request to www.example.com/songs/?orderby=<value>, where you happen to be setting the <value> to "date&order=asc", "date&order=dsc", etc.
The orderby's value has to make it to the server intact. & and = are reserved characters in a URL's query component, so that is why they are being percent-encoded when the orderby field is added to the URL query, thus allowing the server to properly receive the <value> that the user selected for orderby in the HTML.
To do what you want, you need to treat orderby and order separately in the HTML. I would add a separate <select> for order, eg:
<form action="" method="GET">
<label id="sortLabel" for="orderby">Sort Songs:</label>
<select name="orderby" id="sortbox">
<option disabled selected>Sort by:</option>
<option value="date">Date</option>
<option value="title">Title</option>
</select>
<select name="order" id="sortbox">
<option disabled selected>Order by:</option>
<option value="asc">Oldest First, Alphabetical (A-Z)</option>
<option value="dsc">Newest First, Alphabetical (Z-A)</option>
</select>
<input type="submit" value="Filter" />
</form>
If you wanted to make the order list a little cleaner, you could use client-side scripting to manipulate the display texts of the order options whenever the user selects a different orderby option.
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>
is it possible to use required attribute with the button type="button" instead of submit?
<form id="form1" >
<select required>
<option value="">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="button" value="go">
</form>
DEMO
Required is only for fields that must be filled with data. Buttons are used to trigger something, so it can't be set to required. If your form will be used to send data to your server then there is no reason not to use submit.