使用Javascript/Jquery動態驗證ASP.NET控件

Question

我有多個控件需要基於一個條件進行驗證：如果三個控件中的一個具有值，則第四個控件也必須包含一個值。我有4組4個控件，每個控件的編號從1到4。我寫了一個快速和髒的函數來驗證，但它的代碼本身是不聖潔的，並且藐視了大多數優秀代碼設計的原則，它的確很醜。

JavaScript驗證

$(document).ready(function() { 
      $("#<%= submitBtn.ClientID%>").click(function() { 
      var errorMessage = ""; 
      var error = false; 

      var firstname1 = document.getElementById("<%=child1FN.ClientID%>").value; 
      var surname1 = document.getElementById("<%=child1LN.ClientID%>").value; 
      var relation1 = document.getElementById("<%=ddlRelationship1.ClientID%>").value; 
      var dob1 = document.getElementById("<%=DoB1.ClientID%>"); 
      if ((firstname1 != "" || surname1 != "" || relation1 != "") && dob1.value == "") { 
       errorMessage += "First DoB needs to be filled. \n"; 
       error=true; 
      } 

      var firstname2 = document.getElementById("<%=child2FN.ClientID%>").value; 
      var surname2 = document.getElementById("<%=child2LN.ClientID%>").value; 
      var relation2 = document.getElementById("<%=ddlRelationship2.ClientID%>").value; 
      var dob2 = document.getElementById("<%=DoB2.ClientID%>"); 
      if ((firstname2 != "" || surname2 != "" || relation2 != "") && dob2.value == "") { 
       errorMessage += "Second DoB needs to be filled. \n"; 
       error=true; 
      } 
      var firstname3 = document.getElementById("<%=child3FN.ClientID%>").value; 
      var surname3 = document.getElementById("<%=child3LN.ClientID%>").value; 
      var relation3 = document.getElementById("<%=ddlRelationship3.ClientID%>").value; 
      var dob3 = document.getElementById("<%=Dob3.ClientID%>"); 
      if ((firstname3 != "" || surname3 != "" || relation3 != "") && dob3.value == "") { 
       errorMessage += "Third DoB needs to be filled. \n"; 
       error=true; 
      } 

      var firstname4 = document.getElementById("<%=child4FN.ClientID%>").value; 
      var surname4 = document.getElementById("<%=child4LN.ClientID%>").value; 
      var relation4 = document.getElementById("<%=ddlRelationship4.ClientID%>").value; 
      var dob4 = document.getElementById("<%=DoB4.ClientID%>"); 
      if ((firstname4 != "" || surname4 != "" || relation4 != "") && dob4.value == "") { 
       errorMessage += "Fourth DoB needs to be filled. \n"; 
       error=true; 
      } 

      if (error) { 
       alert(errorMessage); 
       return false; 
      } 
     }); 
    }); 

的問題是，隨着ASP不下列源

<tr> 
       <th> 
         Child one: 
        </th> 
       </tr> 
       <tr> 
        <td> 
         <asp:TextBox ID="child1FN" runat="server" /> 
        </td> 
        <td> 
         <asp:TextBox ID="child1LN" runat="server" /> 
        </td> 
        <td> 
         <asp:DropDownList ID="ddlRelationship1" runat="server" ></asp:DropDownList> 
        </td> 
        <td> 
         <telerik:RadDatePicker ID="DoB1" runat="server" Culture="English (Australia)" MinDate="1 Jan 1920" class="datePickerDOB"> 
         </telerik:RadDatePicker> 
        </td> 
       </tr> 

       <tr> 
        <th> 
         Child two: 
        </th> 
       </tr> 

       <tr> 
        <td> 
         <asp:TextBox ID="child2FN" runat="server" /> 
        </td> 
        <td> 
         <asp:TextBox ID="child2LN" runat="server" /> 
        <td> 
         <asp:DropDownList ID="ddlRelationship2" runat="server"></asp:DropDownList> 
        </td> 
        <td> 
         <telerik:RadDatePicker ID="DoB2" runat="server" Culture="English (Australia)" MinDate="1 Jan 1920" class="datePickerDOB"> 
         </telerik:RadDatePicker> 
        </td> 
       </tr> . . . 

我只接受過一個JavaScript值，我不能用一個for循環顯示了源代碼的前兩行已被簡化並刪除了易讀性的樣式標籤。就像我寫的一樣;有4行，它們與上面的代碼相似，但只有一個不同的ID。

我想知道是否有人有任何改善此代碼的建議嗎？

渲染Telerick代碼

<span class="riSingle RadInput RadInput_MetroTouch" id="ctl00_cphBody_DoB1_dateInput_wrapper" style="width: 100%; display: block;"> 
    <input name="ctl00$cphBody$DoB1$dateInput" class="riTextBox riEnabled" id="ctl00_cphBody_DoB1_dateInput" style="padding-left: 2px; font-size: 12px;" type="text"> 
    <input name="ctl00_cphBody_DoB1_dateInput_ClientState" id="ctl00_cphBody_DoB1_dateInput_ClientState" type="hidden" value='{"enabled":true,"emptyMessage":"","validationText":"","valueAsString":"","minDateStr":"20202020-JanJan-0101-0000-0101-0000","maxDateStr":"99999999-DecDec-3131-0000-1212-0000","lastSetTextBoxValue":""}' autocomplete="off"> 
</span> 

Answer 1

GIV容器中的ID，這會讓你的生活與jQuery容易多了（是有點比使用類等作爲選擇更有效）。此外，類添加到您的「數據」行

<table id="formElements"> 
    <tr><th>Child 1</th></tr> 
    <tr class="data"><!-- Form Elelemt Cells --></tr> 
    <!-- etc --> 
</table> 

的Javascript

$(document).ready(function() { 
    var formTable = $("#formElements"); 
    /*console.log(formTable); */ 


    $("#submitBtn").click(function (index) { 
    var errorMessage = ""; 
    var error = false; 

    //Use the fact we have the elements in a row to our advantage 
    $(formTable).find("tr.data").each(function (index) { 
     var firstName = $(this).find("td:nth-child(1) input").val(); 
     var lastName = $(this).find("td:nth-child(2) input").val(); 
     var relationship = $(this).find("td:nth-child(3) select").val(); 
     //Taking a punt the value is in the hidden form field for DOB; 
     var dob = $(this).find("td:nth-child(4) input[type='hidden']").val(); 

     //Use console to try and work out what telrik uses to hold the data 
     console.log($(this).find("td:nth-child(4) input[type='hidden']")); 
     console.log($(this).find("td:nth-child(4) input[type='text']")); 

     if ((firstName != "" || lastName != "" || relationship != "") && dob == "") { 
      errorMessage += "DoB " + (index + 1) + " needs to be filled. \n"; 
      error = true; 
     } 
    }); 

    if (error) { 
     alert(errorMessage); 
     return false; 
    } 
    }); 
}); 

這是一個有點快速和骯髒和處理telrick控制可能會非常棘手。

Demo

如果你可以使用ASP.net inbuild驗證器來驗證telrik控制你​​可以使用它們會更好。即使是stil，使用一個自定義的ASP.net驗證器也應該能夠以類似的方式工作。

更新

我已經添加了幾個使用console.log嘗試與telrik控件幫助調試線。

性能稍微哈克版本

保持HTML按照以上。

的Javascript

$(document).ready(function() { 
    var formTable = $("#formElements"); 
    /*console.log(formTable); */ 

    //Create an array of the DatePicker controls 
    //You could replace the jQuery selectro with: 
    //document.getElementById("<%=DoB1.ClientID%>") 
    var arrDoB = new Array( 
        $("#<%=DoB1.ClientID%>"), 
        $("#<%=DoB2.ClientID%>"), 
        $("#<%=DoB3.ClientID%>"), 
        $("#<%=DoB4.ClientID%>") 
       ); 

    $("#submitBtn").click(function (index) { 
    var errorMessage = ""; 
    var error = false; 

    //Use the fact we have the elements in a row to our advantage 
    $(formTable).find("tr.data").each(function (index) { 
     var firstName = $(this).find("td:nth-child(1) input").val(); 
     var lastName = $(this).find("td:nth-child(2) input").val(); 
     var relationship = $(this).find("td:nth-child(3) select").val(); 

     //Get the value of the datepicker control from the array 
     var dob = arrDoB[index].value; 

     if ((firstName != "" || lastName != "" || relationship != "") && dob == "") { 
      errorMessage += "DoB " + (index + 1) + " needs to be filled. \n"; 
      error = true; 
     } 
    }); 

    if (error) { 
     alert(errorMessage); 
     return false; 
    } 
    }); 
});