Dropdown Validation using javascript

Question

I am doing a validation that checks whether a value other than Please Select... is selected in a asp.net drop down button with the use of javascript. I am firing the validation function in the onchange of the drop down event and if the value is Please Select..., I am displaying a message in the label control.

Below is my aspx code.

            document.getElementById("ContentPlaceHolder1_drpEditAlerts").onchange = function validate_Quest() {
                var edAlertSelect = document.getElementById("ContentPlaceHolder1_drpEditAlerts");
                if (edAlertSelect.selectedIndex == 0) {
                    document.getElementById("lblEdtAlert").innerHTML = 'Kindly select an alert!';
                    document.getElementById('lblEdtAlert').style.color = "red";
                    document.getElementById("ContentPlaceHolder1_Button3").disabled = true;
                    return false;
                }
                document.getElementById("lblEdtAlert ").innerHTML = '';
                document.getElementById("ContentPlaceHolder1_Button3").disabled = false;
                return true;
            }

<p>
Select an alert to link this scenario* 
   <span style="float: right">
      <asp:Label ID="lblEdtAlert" Text="" ForeColor="Red" Font-Size="Smaller"></asp:Label>    </span>
  <asp:DropDownList ID="drpEditAlerts" runat="server" Height="32px" Width="500px" />
</p>

The code is working fine and when I have the please select value in dropdown its showing me the message in the label. However when I select a value in the drop down that label message is still showing the error and is not getting closed.

Any help is highly appreciated.

Answer 1

Simpler

var select = document.getElementById("ContentPlaceHolder1_drpEditAlerts");
var label = document.getElementById("lblEdtAlert");
var button = document.getElementById("ContentPlaceHolder1_Button3");

window.onload = function() {
  select.onchange = function() {
    var ok = this.selectedIndex > 0;
    label.innerHTML = ok ? "" : 'Kindly select an alert!';
    label.style.color = ok ? "black" : "red";
    button.disabled = !ok;
  }
}

<p>
  Select an alert to link this scenario*
  <span>
      <label id="lblEdtAlert"></label>
    </span>
  <select id="ContentPlaceHolder1_drpEditAlerts">
    <option>Please Select</option>
    <option>Other 1</option>
    <option>Other 2</option>
  </select>
  <button id="ContentPlaceHolder1_Button3">send</button>
</p>