I have five (5) individual dropdown lists on my web page.
- cities
- iptypes
- purposes
- billings
- protocols
I want to validate that user must have at-least to select any one [ drop down list ] of them [ from 5 dropdowns ] to proceed next
Add a comment
|
3 Answers
Make a mutual exclusive validation easily by Ketchup plugin.
You can see the sample in demo for CheckBoxes.
Or you can assign them the same name and select their selected options and check it's length, like what the VinayC did and then show a message.
1 Comment
Jahan Zinedine
You're welcome dude, so try to Mark one of the replies as answer(not necessarily mine) if it solved your issue :-)
Assuming your drop downs has class called mySelects,
if ($('.mySelects option:selected').length == 0)
{
// no drop-down has selected
}
4 Comments
mplungjan
VinayC: would that not fail when each select has a "Please select" option?
VinayC
@mplungjan, yes, if you are using option such as "Please select" or "--Select" then this code won't work. In such case, you have to loop through each dropdown.
mplungjan
Cant you use selectedIndex>0 on each?
VinayC
@mplungjan, yes but as said that would require iterating over each drop-down such as
$('.mySelects option:selected').each(function() { ...'. Now, in that iterator function, I can either use selected index or actual selected text.HTML:
<form onsubmit='return checkvalue();'>
<p><label for='cities'>City: </label>
<select id='cities' name='cities' >
<option value=''>Please select city</option>
<option value='city1'>City 1</option>
<option value='city2'>City 2</option>
<option value='.....'>.....</option>
</select>
</p>
<p><label for='iptypes'>IP Types: </label>
<select id='iptypes' name='iptypes' >
<option value=''>Please IP Type</option>
<option value='type1'>Type 1</option>
<option value='type2'>Type 2</option>
<option value='.....'>.....</option>
</select>
</p>
<p><label for='purposes'>Purposes: </label>
<select id='purposes' name='purposes' >
<option value=''>Please select Purpose</option>
<option value='purpose1'>Purpose 1</option>
<option value='purpose2'>Purpose 2</option>
<option value='.....'>.....</option>
</select>
</p>
<p><label for='billings'>Billing: </label>
<select id='billings' name='billings' >
<option value=''>Please select billing</option>
<option value='billing1'>Billing 1</option>
<option value='billing2'>Billing 2</option>
<option value='.....'>.....</option>
</select>
</p>
<p><label for='protocols'>Protocols: </label>
<select id='protocols' name='protocols' >
<option value=''>Please select protocol</option>
<option value='protocol1'>Protocol 1</option>
<option value='protocol2'>Protocol 2</option>
<option value='.....'>.....</option>
</select>
</p>
</form>
JavaScript:
function checkvalue() {
if(document.getElementById('cities').value !== '' ||
document.getElementById('iptypes').value !== '' ||
document.getElementById('purposes').value !== '' ||
document.getElementById('billings').value !== '' ||
document.getElementById('protocols').value !== ''
)
{
return true;
}
alert('Please select at least one value');
return false;
}
