使用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>