Validate dropdown list in jquery

Question

I have one dropdown in html and i want to validate it using jquery.

 Please select your rating * :
    <select id="myDropdown">
    <option value="">-Please Select-</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
    </select>

My Jquery code is like

if ($('#myDropdown option:selected').length == 0)
    {
      alert("Please select anyone");
    }

What I need is if any value is not selected and it remains like -Please Select- and if the user press submit button, then an alert or any appropriate message needs to be displayed Please help

Jared Farrish · Accepted Answer · 2011-03-20 17:25:24Z

6

mydropdown = $('#myDropdown');
if (mydropdown.length == 0 || $(mydropdown).val() == "")
{
    alert("Please select anyone");
}

See Note below. Also, you don't need the option:selected (as per Sly's original answer).

On this fiddle, try selecting another value, then try to select the -Please Select- option. You will see the alert().

http://jsfiddle.net/userdude/aS2AM/

EDIT

NOTE: The length test is doing nothing, since it will always report 1, as at least one option is always selected (and your selector is always selecting at least one option, unless the select has no options). I have removed that in this update to the fiddle and code below:

http://jsfiddle.net/userdude/LdN6c/3/

You're not capturing the form submit event.

$(document).ready(function() {
    $('#myForm').submit(function(e){ // <<< This selector needs to point to your form.
        if ($('#myDropdown').val() == "") {
            alert("Please select anyone");
            e.preventDefault();
            return false;
        }
    });
});

Note the #myForm needs to select your actual form element that contains the selected element.

See in action here: http://jsfiddle.net/userdude/LdN6c/1/

edited Mar 20, 2011 at 17:25

answered Mar 20, 2011 at 16:33

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

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

9 Comments

sanjeev Over a year ago

When the page is refreshed, it shows an alert. But when the form is submitted, it is not showing any alert even if the dropdown option is -Please Select-

sanjeev Over a year ago

This is my Jquery Code now: $(document).ready(function() { mydropdown = $('#myDropdown option:selected'); if (mydropdown.length == 0 || $(mydropdown).val() == "") { alert("Please select anyone"); } });

sanjeev Over a year ago

ohh..in that answer, drop down change event was not there. Your online program is working fine for me..Thanks Jared

Jared Farrish Over a year ago

@sanjeev - See my edit with the submit event handler. Also, if this answers the question for you, please click the check to the right of the answer to select it as the answer. :)

Jared Farrish Over a year ago

@sanjeev - You also want to use the submit event handler for this kind of validation (and have a server-side validator in case the JS doesn't function properly).

|

Sylvain Guillopé · Accepted Answer · 2011-03-20 17:21:29Z

-1

jQuery(function($) {
    $('#myForm').submit(function(e) {
        if ($('#myDropdown').val() == '') {
            e.preventDefault();
            alert("Please select anyone");
        }
    });
});

Edited with form submit event handler

edited Mar 20, 2011 at 17:21

answered Mar 20, 2011 at 16:38

Sylvain Guillopé

1,3579 silver badges21 bronze badges

6 Comments

Jared Farrish Over a year ago

Whoever down voted this, I'd just like to point out that the length test doesn't do anything. I didn't realize that until just now, but it always reports 1, since an option is always selected.

Sylvain Guillopé Over a year ago

I think it's been downvoted because I didn't provide a full solution. I didn't realized that his problem could be on the form submit event.

Jared Farrish Over a year ago

I didn't find that out until his comment, so that would be a poor reason for down voting. I really don't know who down voted, but I think your answer is technically correct.

Sylvain Guillopé Over a year ago

No worries, I edited my answer with a more complete solution :)

Jared Farrish Over a year ago

Copying my answer into yours is cheesy. You could have just left it as it was, since it did answer the question.

|

Collectives™ on Stack Overflow

Validate dropdown list in jquery

2 Answers 2

9 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related