Custom html validation for select

Custom html validation for select - javascript

I have a select element like this:
<select name="select">
<option value="opt1">Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
and I want user to select a option e.g. opt2, opt3... but opt1,
how to to use html 5 validation to valid the select?

I think the only way to add the validation here is to set the default option value to an empty string and add required attribute to select element. Now you can click on submit button to see the validation:
<form>
<label >Choose an option:</label>
<select name="select" required>
<option value="" disabled selected>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
<input type="submit">
</form>
The issue here is that when you set a value to the default option to something other than empty string the validation infers it as a valid value has been already selected, thus the validation is not triggered at that point.

You can do something like the following:
<select name="select">
<option value="opt1" selected disabled>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
In the snippet above, the opt1 is selected by default. The user can only select opt2 or opt3, but once they do that then they cannot selecte opt1, hope this is the behaviour you're looking for.

Try Using:
<select name="select" required>
<option value="opt1" selected="selected" disabled>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>

Related

How to change pull-down menu options based on checkbox setting?

I have the following menu options defined:-
<label><strong>Release #1:</strong></label>
<select id="selectedBaseRelease">
<option value="/~releases/file2">ICC2_O-2018.06</option>
<option value="/~releases/file3" selected >ICC2_N-2017.09-SP6</option>
<option value="/~releases/file4">ICC2_N-2017.09-SP5</option>
</select>
<br><br>
<label><strong>Release #2:</strong></label>
<select id="selectedNewRelease">
<option value="/~releases/file1" selected >ICC2_O-2018.06-SP1</option>
<option value="/~releases/file2">ICC2_O-2018.06</option>
<option value="/~releases/file3">ICC2_N-2017.09-SP6</option>
</select>
I would like to add the following checkbox:-
<strong>Include T-builds:</strong> <input type="checkbox" id="include_Ts"/>
...and when include_Ts is checked, I would like the list of values for selectedBaseRelease and selectedNewRelease to change, e.g. to something like...
<label><strong>Release #1:</strong></label>
<select id="selectedBaseRelease">
<option value="/~releases/file2">ICC2_O-2018.06</option>
<option value="/~releases/file2a">ICC2_O-2018.06a</option>
<option value="/~releases/file3" selected >ICC2_N-2017.09-SP6</option>
<option value="/~releases/file3a">ICC2_N-2017.09-SP6a</option>
<option value="/~releases/file4">ICC2_N-2017.09-SP5</option>
<option value="/~releases/file4a">ICC2_N-2017.09-SP5a</option>
</select>
<br><br>
<label><strong>Release #2:</strong></label>
<select id="selectedNewRelease">
<option value="/~releases/file1" selected >ICC2_O-2018.06-SP1</option>
<option value="/~releases/file1a">ICC2_O-2018.06-SP1</option>
<option value="/~releases/file2">ICC2_O-2018.06</option>
<option value="/~releases/file2a">ICC2_O-2018.06a</option>
<option value="/~releases/file3">ICC2_N-2017.09-SP6</option>
<option value="/~releases/file3a">ICC2_N-2017.09-SP6a</option>
</select>
How does one define an if-then condition to activate the alternate select id choices when include_Ts is checked?

Here's one way to accomplish this using only CSS and no JavaScript. Live demo below.
A few things allow this to happen:
We're giving the values you'd like hidden by default a class (<option class="tbuild"...)
In the CSS, we're hiding elements with that class by default (.tbuild { display: none; })
In the CSS, we're also looking to see if the #include_Ts checkbox was checked, and if it is, we display those .tbuild options.
Note that for this to occur, the hierarchy needs to remain more or less the same as this demo. The checkbox needs to be prior to the select menus, and not within its own parent element separate from the select elements.
Let me know if you have any questions!
.tbuild {
display: none;
}
#include_Ts:checked~select .tbuild {
display: block;
}
<strong>Include T-builds:</strong> <input type="checkbox" id="include_Ts" />
<br><br>
<label><strong>Release #1:</strong></label>
<select id="selectedBaseRelease">
<option value="/~releases/file2">ICC2_O-2018.06</option>
<option value="/~releases/file2a" class="tbuild">ICC2_O-2018.06a</option>
<option value="/~releases/file3" selected>ICC2_N-2017.09-SP6</option>
<option value="/~releases/file3a" class="tbuild">ICC2_N-2017.09-SP6a</option>
<option value="/~releases/file4">ICC2_N-2017.09-SP5</option>
<option value="/~releases/file4a" class="tbuild">ICC2_N-2017.09-SP5a</option>
</select>
<br><br>
<label><strong>Release #2:</strong></label>
<select id="selectedNewRelease">
<option value="/~releases/file1" selected>ICC2_O-2018.06-SP1</option>
<option value="/~releases/file1a" class="tbuild">ICC2_O-2018.06-SP1</option>
<option value="/~releases/file2">ICC2_O-2018.06</option>
<option value="/~releases/file2a" class="tbuild">ICC2_O-2018.06a</option>
<option value="/~releases/file3">ICC2_N-2017.09-SP6</option>
<option value="/~releases/file3a" class="tbuild">ICC2_N-2017.09-SP6a</option>
</select>

Best way to alternate constraints on two dropdowns

I have two dropdown selects that have the same values. I am building a converter from the source (left) unit to the destination (right) unit . It doesn't make sense to convert to and from like units. I know how to add an event on a dropdown select to remove the selected option from the alternate box but I am unclear on writing this to produce the best UI experience. Give the following trimmed case:
<select name="srcUnit" id="srcUnit">
<option value="Unit 1">Unit 1</option>
<option value="Unit 2">Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
<select name="dstUnit" id="dstUnit">
<option value="Unit 1">Unit 1</option>
<option value="Unit 2">Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
What might be a best practice for approaching this? If you choose a source of "Unit 2" how should destination react, remove it? Then I need a reset button, or if you choose "Unit 2" in destination as well, bounce source to something else (that seems worse and intuitive)?
Forget about this and just validate on submit?

Check the new value on each dropdown change event.
If the value is also selected in the other dropdown, move the value of the other dropdown to next (or default) option.
To give the user a clue that he should not select the same value twice, gray out the values that are already select in the other dropdown.
I have written the code for you, here is an executable snippet:
$("#srcUnit, #dstUnit").change(function(){
/*Detect wether we have srcUnit or dstUnit */
if($(this).attr("id") == "srcUnit"){var otherUnit = "dstUnit";}
else{var otherUnit = "srcUnit";}
/*Save new Value*/
var newVal = $(this).children("option:selected" ).val();
/*Select next option in other dropdown if it's old value was selected*/
if(newVal == $("#"+otherUnit+" option:selected").val()){
$('#'+otherUnit+' option:selected').removeAttr('selected').next().attr('selected', 'selected');
}
/*Update UI*/
$('#'+otherUnit+' option').removeClass("disabled");
$('#'+otherUnit+' option[value="'+newVal+'"]').addClass("disabled");
});
.disabled {
color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="srcUnit" id="srcUnit">
<option value="Unit 1" selected>Unit 1</option>
<option value="Unit 2">Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
<select name="dstUnit" id="dstUnit">
<option value="Unit 1" class="disabled">Unit 1</option>
<option value="Unit 2" selected>Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
I edited my answer to better fit the question, old Answer:
Use the HTML 5 disabled attribute.
<select name="srcUnit" id="srcUnit">
<option value="Unit 1">Unit 1</option>
<option value="Unit 2" selected>Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
<select name="dstUnit" id="dstUnit">
<option value="Unit 1">Unit 1</option>
<option value="Unit 2" disabled>Unit 2</option>
<option value="Unit 3">Unit 3</option>
</select>
Read more and try out here: http://www.w3schools.com/tags/att_option_disabled.asp
Subscribe to the onchange event of the dropdowns with javascript and toggle the attribute as needed.

Show a second select box based on the option chosen in the first?

I have the following select drop down box:
<select name="selectcourier" required>
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
What I want to do is if Interlink is selected a secondary select box appears below it and disappears if it unselected and another option is chosen instead. This is the second select drop down box.
<label>Select Shipping Courier:</label>
<select name="selectcourier" required>
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
How can I go about getting this working?

bind an event with javascript on change and insert a new element in the DOM (the second select statement) like:
(provided you have jquery)
var secondSelect="your_html_here";
$("name='selectcourier'").change(function() {
if (this.val()=='Interlink') {
$('body').append(secondSelect); }
else {
$('#secondselectid').remove();
});
customise the html and where you want to append the second select

<script>
$(function(){
$('#s1').hide();
});
function call()
{
var check=$('#s2').val();
if(check=="Interlink")
{
$('#s1').show();
}
else
{
$('#s1').hide();
}
}
</script>
<select name="selectcourier" required onchange="call();" id="s2" >
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
<label>Select Shipping Courier:</label>
<select name="selectcourier" required id="s1">
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
You can use the above code to achieve your task

Just react on the event of changing the value of the first select.
If the value equals 'Interlink' display the second select - if the value is something else hide the second select.
<select name="selectcourier" required onchange="document.getElementById('interlink_addition').style.display = (this.value=='Interlink' ? 'block' : 'none')">
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
<div id="interlink_addition" style="display:none">
<label>Select Shipping Courier:</label>
<select name="selectcourier" required>
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
</div>

you can use ajax for this. write a ajax function to show second select box and call it on onChange event of the first select Box

Change fieldset via radio button

I have a form with 2 radio buttons and when either button is toggled it shows or hides a certain fieldset. The issue I have is because the fieldset is just hidden so when the form is submitted it still takes the first fieldsets values.
I have setup a fiddle to show how the form changes the fieldsets http://jsfiddle.net/hhdMq/1/
So when I select "Scale B" although you can change the correct values, when the form is submitted it takes the default values of Scale A.
<center>
<input type="radio" name="sellorlet" value="Yes" id="rdYes" checked="yes" />
<label for="rdYes">Scale A</label>
<input type="radio" name="sellorlet" value="No" id="rdNo" />
<label for="rdNo">Scale B</label>
</center>
<fieldset id="sell">
<center>
<select id="pricemin" name="min">
<option value="50000">Min Price</option>
<option value="50000">£50,000</option>
<option value="100000">£100,000</option>
<option value="200000">£200,000</option>
<option value="300000">£300,000</option>
<option value="400000">£400,000</option>
<option value="500000">£500,000</option>
<option value="600000">£600,000</option>
<option value="700000">£700,000</option>
<option value="800000">£800,000</option>
<option value="900000">£900,000</option>
<option value="1000000">£1,000,000</option>
<option value="1250000">£1,250,000</option>
<option value="1500000">£1,500,000</option>
<option value="1750000">£1,750,000</option>
<option value="2000000">£2,000,000</option>
<option value="3000000">£3,000,000</option>
</select>
<select id="pricemax" name="max">
<option value="5000000">Max Price</option>
<option value="100000">£100,000</option>
<option value="200000">£200,000</option>
<option value="300000">£300,000</option>
<option value="400000">£400,000</option>
<option value="500000">£500,000</option>
<option value="600000">£600,000</option>
<option value="700000">£700,000</option>
<option value="800000">£800,000</option>
<option value="900000">£900,000</option>
<option value="1000000">£1,000,000</option>
<option value="1250000">£1,250,000</option>
<option value="1500000">£1,500,000</option>
<option value="1750000">£1,750,000</option>
<option value="2000000">£2,000,000</option>
<option value="3000000">£3,000,000</option>
<option value="4000000">£4,000,000</option>
<option value="5000000">£5,000,000</option>
</select>
</center>
</fieldset>
<fieldset id="buy" style="display:none;">
<center>
<select id="lpricemin" name="min">
<option value="500">Min Price</option>
<option value="500">£500</option>
<option value="600">£600</option>
<option value="700">£700</option>
<option value="800">£800</option>
<option value="900">£900</option>
<option value="1000">£1000</option>
<option value="1150">£1150</option>
<option value="1250">£1250</option>
<option value="1500">£1500</option>
<option value="2000">£2000</option>
<option value="2500">£2500</option>
<option value="3000">£3000</option>
<option value="4000">£4000</option>
<option value="5000">£5000</option>
</select>
<select id="lpricemax" name="max">
<option value="5000">Max Price</option>
<option value="600">£600</option>
<option value="700">£700</option>
<option value="800">£800</option>
<option value="900">£900</option>
<option value="1000">£1000</option>
<option value="1150">£1150</option>
<option value="1250">£1250</option>
<option value="1500">£1500</option>
<option value="2000">£2000</option>
<option value="2500">£2500</option>
<option value="3000">£3000</option>
<option value="4000">£4000</option>
<option value="5000">£5000</option>
</select>
</center>
</fieldset>
and the jquery used:
$("input[name='sellorlet']").change(function () {
$("#sell").toggle(this.value == "Yes");
$("#let").toggle(this.value == "No");
});
My question is, how can I completely disable the first fieldset if Scale B is selected and likewise when Scale A is selected it will disable the second fieldset?
Many thanks

When submitting a form, you cannot have two inputs, selects, or textareas with the same name in the same form. Doing so will cause confusion and probably end up the wrong info being submitted. There are two ways you can fix this.
Method 1:
Change the
<select id="lpricemin" name="min">
<select id="lpricemin" name="lmin">
to
<select id="lpricemax" name="max">
<select id="lpricemax" name="lmax"> respectively.
This will allow you to handle the data from lmin and lmax and ensure you get the info from the second fieldset.
Method 2:
Put the second fieldset in a different form. Then just change the jQuery to show the forms instead of the fieldsets.

Changed the radio buttons now to a tabbed design so the form can be separated correctly. If anyone would like to know how the tabs are done they are here http://cssdeck.com/labs/fancy-tabbed-navigation-with-css3-and-jquery

Method 3 would be to change the switch the content of your select through Javascript rather than toggling through visibility. You can do that through:
function setMaxScale()
{
document.getElementById().innerHTML = "<option value="50000">Min Price</option>\
<option value="50000">£50,000</option>\
<option value="100000">£100,000</option>\
<option value="200000">£200,000</option>\
<option value="300000">£300,000</option>...";
}
An other clean solution would be to create your scales dynamically with a loop.

Adding/Removing/Updating options from select inputs

Here is what I've started to do: http://jsfiddle.net/nd9ny/
For now it doesn't work as I want it to.
I want to update options each time when a new select input is added or an input is removed.
For example, we have our first select input with these options:
<select>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
</select>
When I add new input to my page, I want my function to update all the inputs and to remove the newly selected option from them.
<select>
<option value="1" selected></option>
<option value="3"></option> // The second one is removed
<option value="4"></option>
</select>
<select>
<option value="2" selected></option> // The first one is removed
<option value="3"></option>
<option value="4"></option>
</select>
And then, If I remove the first input, the second one becomes:
<select>
<option value="1"></option>
<option value="2" selected></option>
<option value="3"></option>
<option value="4"></option>
</select>
Pure Javascript code needed.

You may try the following solution:
- CSS:
.hidden {
display: none;
}
- JS function:
function hide_selected(el) {
var index = el.selectedIndex;
// Show every options
for(var i=0; i<el.length; i++)
el[i].className="";
// Hide the selected one
el[index].className="hidden";
}
- HTML example:
<body>
<select onchange="javascript:hide_selected(this);">
<option value="1" class="hidden" selected="selected">1</option>
<option value="2" class="">2</option>
<option value="3" class="">3</option>
<option value="4" class="">4</option>
</select>
</body>
Note: This function was tested with Firefox, you may have to check if this works with other browsers.
Hope this helps

Develop Reference

JavaScript is the programming language of the Web.

Custom html validation for select - javascript

Try Using: <select name="select" required> <option value="opt1" selected="selected" disabled>Select One Value Only</option> <option value="opt2">Type 2</option> <option value="opt3">Type 3</option> </select>

Related

How to change pull-down menu options based on checkbox setting?

Best way to alternate constraints on two dropdowns

Show a second select box based on the option chosen in the first?

Change fieldset via radio button

Adding/Removing/Updating options from select inputs

Categories

Resources