2013-03-20 32 views
1

我想在使用JQuery的ASP.net中使用自定義驗證器對多個字段進行驗證,但我無法使其工作。ASP.Net多個字段上的JQuery customvalidator

有一個下拉框包含兩個值,根據這些值顯示其他項目。

因此,如果用戶選擇選項1,那麼會出現一個文本框,如果他們選擇了選項2,文本框消失並出現兩個下拉框。

根據他們選擇的選項我想驗證他們的輸入。

我至今不工作是

.ASPX

<asp:DropDownList ID="drpHeight" runat="server"> 
          <asp:ListItem Value="CMs">CMs</asp:ListItem> 
          <asp:ListItem Value="Feet">Feet</asp:ListItem> 
         </asp:DropDownList> 

<asp:TextBox ID="txtCm" runat="server" Width="100px"></asp:TextBox> 
         <asp:CustomValidator ID="CustomValidator9" runat="server" ErrorMessage="Please select you height" 
        ClientValidationFunction = "ValidateHeight" Display="Dynamic" ControlToValidate="txtCm" ValidateEmptyText="true"></asp:CustomValidator> 
<asp:RegularExpressionValidator ID="revCm" runat="server" 
        ControlToValidate="txtCm" Display="Dynamic" 
        ErrorMessage="Please enter a valid number" 
        ValidationExpression="^([0-9]*|\d*\.\d{1}?\d*)$" SetFocusOnError="True"></asp:RegularExpressionValidator> 


<br /> 
<br /> 

<asp:DropDownList ID="drpFeet" runat="server"> 
          <asp:ListItem Value="-1">Select...</asp:ListItem> 
          <asp:ListItem Value="1"></asp:ListItem> 
          <asp:ListItem Value="2"></asp:ListItem> 
          <asp:ListItem Value="3"></asp:ListItem> 
          <asp:ListItem Value="4"></asp:ListItem> 
          <asp:ListItem Value="5"></asp:ListItem> 
          <asp:ListItem Value="6"></asp:ListItem> 
          <asp:ListItem Value="7"></asp:ListItem> 
          <asp:ListItem Value="8"></asp:ListItem> 
         </asp:DropDownList> 
          <asp:Label ID="lblFeet" runat="server" Text="Ft"></asp:Label> 
         &nbsp;<asp:DropDownList ID="drpInches" runat="server"> 
          <asp:ListItem Value="-1">Select...</asp:ListItem> 
          <asp:ListItem Value="0"></asp:ListItem> 
          <asp:ListItem Value="1"></asp:ListItem> 
          <asp:ListItem Value="2"></asp:ListItem> 
          <asp:ListItem Value="3"></asp:ListItem> 
          <asp:ListItem Value="4"></asp:ListItem> 
          <asp:ListItem Value="5"></asp:ListItem> 
          <asp:ListItem Value="6"></asp:ListItem> 
          <asp:ListItem Value="7"></asp:ListItem> 
          <asp:ListItem Value="8"></asp:ListItem> 
          <asp:ListItem Value="9"></asp:ListItem> 
          <asp:ListItem Value="10"></asp:ListItem> 
          <asp:ListItem Value="11"></asp:ListItem> 
         </asp:DropDownList> 
         &nbsp;<asp:Label ID="lblInches" runat="server" Text="Inches"></asp:Label> 
<br /> 
<br /> 

JQuery的

 function ValidateHeight(sender, args) { 

     if ($('#<%=drpHeight.ClientID%>').val = "CMs") { 

      if ($('#<%=txtCm.ClientID%>').val().length > 0) { 
       args.IsValid = true; 

      } 

      else { 
       args.IsValid = false; 
       return; 
      } 

     } 

     else if ($('#<%=drpHeight.ClientID%>').val = "Feet") { 
      args.IsValid = true; 
     } 
    } 
     </script> 

在它不工作的那一刻,我做讓它驗證CM b,但隨後它停止工作,現在我可以'弄清楚爲什麼。

解決此問題的最佳方法是什麼?我還有另一個重量來做,以及有3種可能性。

+0

你可能會認爲共同提供*預計*值與某些屬性控制的,所以從JQuery的可以讀取屬性,獲得期望值並將其與用戶輸入的值進行覈對。 – Tigran 2013-03-20 11:51:00

回答

0

我終於遇到了答案,我會爲任何想知道如何做到這一點的人提供答案。

改變了我的客戶驗證程序:

<asp:CustomValidator ID="CustomValidator9" runat="server" ErrorMessage="Please select you height" 
        ClientValidationFunction = "ValidateHeight" Display="Dynamic" ValidateEmptyText="true"></asp:CustomValidator> 

然後我的JQuery成爲

<script type="text/javascript"> 

    function ValidateHeight(sender, args) { 

     var drpHeight = $('#<%=drpHeight.ClientID%>').val(); 

     if (drpHeight == "CMs") { 

      if ($('#<%=txtCm.ClientID%>').val().length > 0) { 
       args.IsValid = true; 
       return; 

      } 

      else { 
       args.IsValid = false; 
       return; 
      } 

     } 

     else if (drpHeight == "Feet") { 

      var drpFeet = $('#<%=drpFeet.ClientID%>').val(); 
      var drpInches = $('#<%=drpInches.ClientID%>').val(); 

      if (drpFeet == -1 || drpInches == -1) { 
       args.IsValid = false; 
       return;      
      } 
      else { 
       args.IsValid = true; 
       return; 
      } 
     }    

     } 
</script>