ASP.NET自定义验证器客户端和服务器端验证

Question

In my web page I'm trying to preform validation on the client side and the server side. if the drop down and the text box are empty I need to show an error message but if one of them is filled out the validation should pass. Is there way to create one CustomValidator for both controls?? I have a feeling I'm not doing it right.

Client Side code:

  <div> <table> <tr> <td> <asp:DropDownList ID="ddlStates" runat="server" Width="128px"> <asp:ListItem></asp:ListItem> <asp:ListItem>Nevada</asp:ListItem> <asp:ListItem>Uta</asp:ListItem> <asp:ListItem>Oregon</asp:ListItem> </asp:DropDownList> </td> <td> <asp:CustomValidator ID="cvddlState" runat="server" ClientValidationFunction="StatesCheck" OnServerValidate="ServerValidation" ErrorMessage="(*) State is required" ForeColor="Red" Display="Dynamic"></asp:CustomValidator> </td> </tr> <tr> <td> <asp:TextBox ID="txtStates" runat="server"></asp:TextBox> </td> <td> <asp:CustomValidator ID="cvtxtStates" runat="server" ValidateEmptyText="true" ClientValidationFunction="StatesCheck" OnServerValidate="ServerValidation" ControlToValidate="txtStates" ErrorMessage="(*) Text cannot be empty" ForeColor="Red" Display="Dynamic"></asp:CustomValidator> </td> </tr> <tr> <td> <asp:Button ID="btnSubmit" runat="server" Text="Submit" /> </td> </tr> </table> </div> <div id="divErrorMessage" runat="server" class="alert alert-danger" visible="false"></div> <script type="text/javascript"> 'Use Strict'; function StatesCheck(source, args) { var ddlStates = document.getElementById("<%=ddlStates.ClientID%>"); var txt = document.getElementById('<%=txtStates.ClientID%>').value; var state = ddlStates.options[ddlStates.selectedIndex].value; if (ddlStates !== null) { if ((state === "") && (txt === "")) { args.IsValid = false; } else { args.IsValid = true; } } } </script> 

Server Side Code:

 Public Sub btnSubmit_Click(sender As Object, e As EventArgs) Handles btnSubmit.Click Try divErrorMessage.Visible = False divErrorMessage.InnerText = "" Dim ddlSelection As String = ddlStates.SelectedItem.Text Dim statesText As String = txtStates.Text.Trim() If statesText = String.Empty And ddlSelection = String.Empty Then Else divErrorMessage.Visible = True divErrorMessage.InnerText = "(*) Text cannot be empty" End If Catch ex As Exception End Try End Sub Protected Sub ServerValidation(source As Object, args As ServerValidateEventArgs) If (ddlStates.SelectedItem.Text = String.Empty) And (txtStates.Text.Length = 0) Then args.IsValid = False Else args.IsValid = True End If End Sub 

Answer 1

Are you getting an answer from both codes on Server Side and Client Side? I want to answer the Server Side

Protected Sub ServerValidation(source As Object, args As ServerValidateEventArgs)
        If (ddlStates.SelectedItem.Text = String.Empty) And (txtStates.Text.Length = 0) Then
            args.IsValid = False
        Else
            args.IsValid = True
        End If

    End Sub

Based on my expirience, Im not quite good in ASP.net but based on ypur code above, theres nothing wrong however the part you are saying but if one of them is filled out the validation should pass doesnt show here can you please try to do this one.

 Protected Sub ServerValidation(source As Object, args As ServerValidateEventArgs)
            If (ddlStates.SelectedItem.Text = String.Empty) Or (txtStates.Text.Length = 0) Then
                args.IsValid = False
Else
                args.IsValid = True
            End If

        End Sub

or maybe

Protected Sub ServerValidation(source As Object, args As ServerValidateEventArgs)
        If (ddlStates.SelectedItem.Text = String.Empty) And (txtStates.Text.Length = 0) Then
            args.IsValid = False
        ElseIf (ddlStates.SelectedItem.Text <> String.Empty) then
          args.IsValid = True
        ElseIf (txtStates.Text <> "") then
          args.IsValid = True
        Else

            args.IsValid = True
        End If

    End Sub

Answer 2

This is a snippet where you can evaluate both controls with a CustomValidator

<asp:CustomValidator ID="CustomValidator1" runat="server" Display="Dynamic" ErrorMessage="input failed" ClientValidationFunction="myFunction"></asp:CustomValidator>

<script type="text/javascript">
    function myFunction(sender, element) {
        if (document.getElementById("<%= ddlStates.ClientID %>").selectedIndex == 0 && document.getElementById("<%= txtStates.ClientID %>").value != "") {
            element.IsValid = true;
        } else {
            element.IsValid = false;
        }
    }
</script>

Answer 3

You can use client side validation for the above scenario.

  <div>
        <table>
            <tr>
                <td>
                    <asp:DropDownList ID="ddlStates" runat="server" Width="128px">
                        <asp:ListItem></asp:ListItem>
                        <asp:ListItem>Nevada</asp:ListItem>
                        <asp:ListItem>Uta</asp:ListItem>
                        <asp:ListItem>Oregon</asp:ListItem>
                    </asp:DropDownList>
                </td>

            </tr>
            <tr>
                <td>
                    <asp:TextBox ID="txtStates" runat="server"></asp:TextBox>
                </td>


            </tr>
            <tr>
                <td>
                    <label id="lbltxtstate" style="display: none;">Please select a state or enter a state.</label>
                    <br />
                    <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="return validateState();" />
                </td>
            </tr>
        </table>
    </div>

    <script type="text/javascript">
    function validateState(){
            if (($('#<%=ddlStates.ClientID %> option:selected').text() == "") && ($('#<%=txtStates.ClientID %>').val() == "")) {

            $('#lbltxtstate').attr('style', 'display:block');
            $('#lbltxtstate').attr('style', 'color:red');
            return false;
        }
        else {           
               $('#lbltxtstate').attr('style', 'display:none');
               return true;
        };

    }
    </script>