ASP.NETカスタムバリデータークライアント側とサーバー側の検証

Question

私のWebページでは、クライアント側とサーバー側で検証を実行しようとしています。ドロップダウンとテキストボックスが空の場合は、エラーメッセージを表示する必要がありますが、そのうちの1つが記入されていれば、検証が成功するはずです。 両方のコントロールに1つのCustomValidatorを作成する方法はありますか？私はそれを正しくしていないと感じている。

クライアント側コード：

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

サーバーサイドコード：

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

あなたは上の両方のコードからの回答を得ていますサーバー側とクライアント側？私はASP.netではかなり良いではない、私のexpirienceに基づいて、サーバー側にイムを

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 

にお答えしたいが、上記のypurコードに基づいて、あなたはあなたがここにbut if one of them is filled out the validation should pass doesntのショーをしてくださいすることができます言っている部分が間違って何もtheresのこれをやってみてください。

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 

または多分

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

これは、あなたが上記のシナリオのために、クライアント側の検証を使用することができます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

で両方のコントロールを評価することができますスニペットです。

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