Form validation with SELECT field using Jquery

Question

Jquery Isn't alerting me when their is no value selected from the Rating form. Would it be because selected="selected" is actually being seen as a value to jquery ?

  <label for="rating">Rating</label>
    <select id="rating" name="rating" />
        <option selected="selected" disabled="disabled">Select a Rating</option>
        <option value="Terrible">Terrible</option>
        <option value="Fair">Fair</option>
        <option value="Ok">Ok</option>
        <option value="Good">Good</option>
        <option value="Excellent">Excellent</option>
       </select>


      $(document).ready(function(){

        // No value for movie_title
        if ($('#movie_title').val() == "" ) {
            alert ("No Film");
        }

        // No Value for actor
        if ($('#leading_name').val() == "") {
            alert ("No actor");
        }

        // No value for rating
        if ($('#rating').val() == "") {
            alert ("No Rating");
        }

        //No value for review
        if ($('#review').val() == "") {
            alert ("No review");
        }

    // Focus on first form field.
        $("input:text:visible:first").focus();

   })

Oh I'm selecting the wrong id review/rating. Actually that's also wrong... been a long day. — user1829823
– user1829823, Commented Sep 18, 2013 at 17:25

tymeJV · Accepted Answer · 2013-09-18 17:28:25Z

2

That's because the default value will be the text if no value is specified.

Give a value of 0 to your default option and check against that:

<option selected="selected" value=0 disabled="disabled">Select a Rating</option>

answered Sep 18, 2013 at 17:28

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

2 Comments

Michael Walter Over a year ago

just to point out: there are some plugins for jquery (like jquery ui), which needs the value attribute exigent to work

user1829823 Over a year ago

Is this how you would check the value if ($('#rating').val() == 0) { alert ("No Rating"); }

Jason P · Accepted Answer · 2013-09-18 17:33:37Z

1

$('#rating').val() returns null:

http://jsfiddle.net/KFpFq/

Adding a value attribute doesn't appear to work in Chrome, though checking for null does.

console.log($('#rating').val()); //null
console.log($('#rating').val() == "0"); //false
console.log($('#rating').val() == null); //true

answered Sep 18, 2013 at 17:33

Jason P

27k3 gold badges34 silver badges45 bronze badges

1 Comment

user1829823 Over a year ago

Never knew such a website existed. Wicked

benjaminbenben · Accepted Answer · 2013-09-18 17:29:50Z

0

You could use the native selectedIndex to find the index of the first selection - https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement

if($('#rating').get(0).selectedIndex === 0){alert("first item")}

answered Sep 18, 2013 at 17:29

benjaminbenben

1,2289 silver badges15 bronze badges

2 Comments

benjaminbenben Over a year ago

It's in the DOM level-1 spec - w3.org/TR/REC-DOM-Level-1/level-one-html.html#ID-94282980 "The ordinal index of the selected option. The value -1 is returned if no element is selected. If multiple options are selected, the index of the first selected option is returned."

benjaminbenben Over a year ago

(the .get(0) gives you the first raw dom element from jQuery selection - api.jquery.com/get )

Collectives™ on Stack Overflow

Form validation with SELECT field using Jquery

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related