asp.netdevexpressrequiredfieldvalidatorautopostback

Using RequiredFieldValidator for DropDownList with AutoPostBack in ASP.Net


I have a dropdownlist with autopostback enabled and a RequiredFieldValidator. I would like that when the User selects a color, through a label, the HTML color code appears next to it and when the User pick "Select" the word "Required" appears.

Here is the code:

<dx:LayoutItem ColSpan="1" FieldName="Color">
   <LayoutItemNestedControlCollection>
      <dx:LayoutItemNestedControlContainer runat="server"
          <div style="display: flex; column-gap: 10px;">
               <dx:LayoutItemNestedControlContainer runat="server">
                   <asp:DropDownList ID="cboColor" runat="server" Width="90px" AutoPostBack="True">

                       <asp:ListItem>Select</asp:ListItem>
                       <asp:ListItem>Black</asp:ListItem>
                       <asp:ListItem>Yellow</asp:ListItem>
                       <asp:ListItem>Red</asp:ListItem>
                       <asp:ListItem>Blue</asp:ListItem>
                    
                   </asp:DropDownList>
                </dx:LayoutItemNestedControlContainer>

                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" ErrorMessage="Required" ControlToValidate="cboColor" InitialValue="Select" runat="server" ForeColor="Red" Font-Bold="true" Display="Dynamic"  />

                <dx:ASPxLabel ID="lblCompleteColor" runat="server" Text="" Font-Bold="true"></dx:ASPxLabel>

           </div>
        </dx:LayoutItemNestedControlContainer>
     </LayoutItemNestedControlCollection>
 </dx:LayoutItem>

and code behide:

Protected Sub cboColor_SelectedIndexChanged(sender As Object, e As EventArgs) Handles cboColor.SelectedIndexChanged
    lblCompleteColor.Text = GetCodeColor(cboColor.SelectedValue)
End Sub


Private Function GetCodeColor(ByVal sCodeColor As String) As String

    Dim sResult As String = ""

    Dim conSQL As New System.Data.SqlClient.SqlConnection(ConfigurationManager.ConnectionStrings("ETConnectionString").ConnectionString)
    Dim cmdSQL As New System.Data.SqlClient.SqlCommand("SELECT CodiceColore FROM COLORI WHERE NomeColore='" & sCodeColor & "'", conSQL)

    Try
        conSQL.Open()
        sResult = cmdSQL.ExecuteScalar()

    Catch ex As Exception
        sResult = ""
    Finally
        conSQL.Close()
    End Try

    Return sResult

End Function

The problem is that the word "Required" disappears quickly when selected. Instead If I add to the DropDownList the CausesValidation property, the word "Required" remains but with the previously selected color next to it.

    <asp:DropDownList ID="cboColor" runat="server" Width="90px" AutoPostBack="True" CausesValidation="true">
        ...
    </asp:DropDownList>

enter image description here

Any solutions?


Solution

  • The CausesValidation="True" should be there in order of validator to work correctly.

    The cause of problem is that the validator checks on the client-side before the post-back, so the text of label still is the assigned value from last post-back.

    You need to clear the label text on the client-side before post-back:

    1- Add the ClientIDMode="Static" attribute to the label to ensure the client-side ID is same as ID="lblCompleteColor":

    <dx:ASPxLabel ID="lblCompleteColor" runat="server" 
        ClientIDMode="Static" 
        Text="" 
        Font-Bold="true">
    </dx:ASPxLabel>
    

    2- Add an onchane attribute to the dropdown list with a value of a function to clear the label text:

    <asp:DropDownList ID="cboColor" runat="server" 
        Width="90px" 
        AutoPostBack="True" 
        CausesValidation="True"
        onchange="document.getElementById('lblCompleteColor').innerText='';">
    ...
    ...
    </asp:DropDownList>