Bootstrap JQuery: dropdown menu validation on selected item

Question

I have the following twitter bootstrap dropdown menu which is part of a form:

<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

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

<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:

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');
    });

KyleMit · Accepted Answer · 2014-09-15 14:10:48Z

3

It seems like you're confusing a the dropdown control in Bootstrap with a Select element. The dropdown can be manually configured to behave as a select control, but you'll need to do it yourself.

For starters, you'll want to do any manipulations whenever the links in the dropdown-menu are clicked. You can do that with a delegate event handler like this:

$(".dropdown").on("click", "li a", function() {
    // Handle Clicks Here
});

Once in there, you can get the text of the currently select anchor like this:

var platform = $(this).text();

Then apply that to whatever other controls you'd like to store that information. If you don't persist it in some way, the dropdown control will have no memory of that option being previously selected. You can add it to the dropdown menu button or to another text field like this:

$("#dropdown_title2").html(platform);
$('#printPlatform').html(platform);

Here's the whole thing in jsFiddle

Update:

If you want to check the value on validation, just check any of the places into which you have persisted the value. If you added it to the screen, you can check it there. If you don't need it to appear anywhere, then you can add it to the dropdown menu as a data attribute. Here's one way you could do that now:

$("#SendRequest").click(function() {

    var platform = $("#dropdown_title2").html();
    var isValid = (platform !== 'Select')

    if (!isValid) {
        alert('Please fill in missing details');
    } else {
        alert('Thank you for submitting');
    }
});

If you need something more specific, I'd recommend using this fiddle as a starter template and getting a working example that reproduces the exact issue you're having

edited Sep 15, 2014 at 14:10

answered Sep 12, 2014 at 16:15

KyleMit♦

31.4k74 gold badges517 silver badges712 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Baggerz Over a year ago

Hi Kyle I think you misunderstood my question, I can already set and display the drop down as required. What I'm trying to do is update my form validation method to check that something has been selected. if the value is still "Select" I will style the drop down with a red border. Ive added my method into the original post which checks the text box's entry when a submission button is pressed but this doesnt account for the 3 drop downs on form the new check will be added to this method.

KyleMit Over a year ago

@Baggerz, I updated the example to include validation. If you need something more specific, can you upload a working fiddle that demonstrates your specific issue.

Collectives™ on Stack Overflow

Bootstrap JQuery: dropdown menu validation on selected item

1 Answer 1

Here's the whole thing in jsFiddle

Update:

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update:

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related