I have the following twitter bootstrap dropdown menu which is part of a form:
<!-- language: lang-html --><div class="form-group">
<label for="platform" class="control-label col-xs-2">Platform:</label>
<div class="col-xs-10">
<div class="dropdown">
<button class="btn btn-default" id="dropdownMenu2" data-toggle="dropdown">
<span id="dropdown_title2">Select</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="dropdownMenu2">
<li><a tabindex="-1" href="#">Android</a></li>
<li><a tabindex="-1" href="#">IOS</a></li>
<li><a tabindex="-1" href="#">Windows Phone</a></li>
</ul>
</div>
</div>
</div>
once the page is loaded then when a user selects an item i use this
<!-- language: lang-js -->var platform = ("Platform: " + $("#dropdown_title2").text());
$('#printPlatform').html(platform);
to set the dropdown value to a var and then display it within a modal using
<!-- language: lang-html --><span id="printPlatform"></span><br />
I'm now looking to validate this dropdown to check an item has been selected and the default value of "select" has been changed.
Here's what I tried:
<!-- language: lang-js -->var selected = "Select"
if ($("#dropdown_title1").text == selected) {
alert('Please fill in missing details');
}
However, when the code is run no alert dialog is displayed. Anyone know where I'm going wrong?
Current Validation for textboxs (drop down validation will be added to this method)
$(document).ready(function () {
@*Validation for Empty fields with name formpart*@
$('#SendRequest').click(function (e) {
var isValid = true;
$("[name='formpart']").each(function () {
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).css({
"border": "1px solid red",
"background": "#FFCECE"
});
}
else {
$(this).css({
"border": "",
"background": ""
});
$("#basicModal").modal('show');
}
});
if (isValid == false)
alert('Please fill in missing details');
else
alert('Thank you for submitting');
});