Question

The code is below and at http://jsfiddle.net/eCubeH/utBEs/1/

The select is required. So selecting the first empty string value option should make it invalid.

I use jquery condition: ($(myChangeSelector + “:invalid”).length > 0) to identify the invalid state. Firefox 15 returns a value of 1 correctly to show it is invalid. Chrome 21 returns 0 and then continues to behave inconsistently.

Been breaking my head on this, is this a Chrome bug or something I am missing?

—– the code —–

<select id="selDisbLocation" required="" tabindex="3">
    <option value="" >-</option>
    <option value="0" selected>Center</option>
    <option value="1" >Office</option>
</select>​

$(function() {
    $("select").live(
    "change",
    function(event) {
       myChangeSelector = "#" + event.target.id;
       alert(myChangeSelector);
       alert($(myChangeSelector).val());
       alert("Invalid Length: " + $(myChangeSelector + ":invalid").length);
    });
});

​

Answer 1

According to https://developer.mozilla.org/en-US/docs/CSS/:invalid, the CSS pseudo-class :invalid only apply to <input> and <form> elements. That may be the cause of your unexpected results.

I would suggest invalidating the <select> by value or index instead.