使用JavaScript來驗證上的GridView特定行

Question

我想創建一個「檢查輸入」的劇本，

在GridView我有一個ID綁定字段

基本上，2下拉的，1個文本框和一個複選框，當它是輸入點擊我希望它檢查下拉列表不是默認值，並且文本框包含有效時間，如果是這樣的話，讓勾選保持不變，如果不勾選複選框。

這是我目前有，但沒有成功。

function CheckSelectedRow(lnk) { 

     var row = lnk.parentNode.parentNode; 

     var rowIndex = row.rowIndex - 1; 

     var ddl1 = row.cells[1].getElementsByTagName("input")[0].value; 

     var ddl2 = row.cells[2].getElementsByTagName("input")[0].value 

     var time1 = row.cells[3].getElementsByTagName("input")[0].value 

     var regex = /^(2[0-3])|[01][0-9]:[0-5][0-9]$/; 
     var test = regex.test([time1]); 
     if (ddl1 != "Select Resource" && ddl2 != "Select Resource" && test == true) { 

      return true; 

     } 
     else { 

      return false; 
     } 
    } 

HTML

      <asp:GridView runat="server" ID="grd_issue_am" Width="95%" AutoGenerateColumns="False" AllowPaging="false" 
          EmptyDataText="No Runs to Display" CssClass="mGrid" OnRowDataBound="grd_details_am_format" OnDataBound="grd_issue_am_format" DataSourceID="sql_grd_issue_am"> 
          <Columns> 
          <asp:TemplateField HeaderText="Run No"> 
           <ItemTemplate> 
            <Columns> 
            <asp:BoundField DataField="farm_name" HeaderText="Farm" ItemStyle-Width="300" HeaderStyle-Width="300" /> 
            <asp:BoundField DataField="arrival" HeaderText="Arrival" ItemStyle-Width="75" HeaderStyle-Width="75" /> 
            <asp:BoundField DataField="milk_type" HeaderText="Milk" ItemStyle-Width="100" HeaderStyle-Width="100" /> 
            </Columns> 
            </asp:GridView> 
            </div> 
            </div> 
           </ItemTemplate> 
          </asp:TemplateField> 
          <asp:TemplateField HeaderText="Driver Name"> 
           <ItemTemplate> 
            <asp:DropDownList runat="server" ID="ddl_grd_am_driver" OnDataBound="ddl_add_select" DataTextField="drivername" DataValueField="driver_id" DataSourceID="sql_driver_list" ></asp:DropDownList> 
           </ItemTemplate> 
          </asp:TemplateField> 
          <asp:TemplateField HeaderText="Vehicle Reg"> 
           <ItemTemplate> 
            <asp:DropDownList runat="server" ID="ddl_grd_am_vehicle" OnDataBound="ddl_add_select" DataTextField="unit_reg" DataValueField="unit_id" DataSourceID="sql_Vehicle_list" ></asp:DropDownList> 
           </ItemTemplate> 
          </asp:TemplateField> 
          <asp:TemplateField HeaderText="Clock In Time"> 
           <ItemTemplate> 
            <asp:TextBox runat="server" ID="txt_grd_am_clock_in" onblur="this.value=four_digit_clock(this.value);" OnKeyPress="return NumberOnly()" MaxLength="5"></asp:TextBox> 
           </ItemTemplate> 
          </asp:TemplateField> 
          <asp:TemplateField HeaderText="Send Run"> 
           <ItemTemplate> 
            <asp:CheckBox runat="server" ID="chk_grd_am_send_run" onclick="this.checked=CheckSelectedRow(this)" Checked="false" /> 
           </ItemTemplate> 
          </asp:TemplateField> 
          <asp:TemplateField HeaderText="Run Status"> 
           <ItemTemplate> 
            <asp:Label runat="server" id="lbl_grd_am_run_status"></asp:Label> 
            <asp:HiddenField runat="server" ID="transam" Value="" /> 
           </ItemTemplate> 
          </asp:TemplateField> 
          </Columns> 
         </asp:GridView> 

什麼想法？

Answer 1

你可以使用純HTML5

<table> 
    <tr> 
     <td><select id="opt-first"> 
      <option disabled>Select one of the below</option> 
      <option>One</option> 
      <option>Two</option> 
      </select> 
     </td> 
     <td> 
      <input type="text" pattern="/^(2[0-3])|[01][0-9]:[0-5][0-9]$/" 
       id="txt-data" placeholder="Insert a data"/> 
     </td> 
    </tr> 
</table> 

但是JavaScript解決方案可能是

<asp:DropDownList runat="server" ID="ddl_grd_am_vehicle" bla bla OnClientClick="validate(this)" ></asp:DropDownList> 
... 
<asp:TextBox runat="server" ID="txt_grd_am_clock_in" bla onblur="validate(this)"></asp:TextBox> 

function validate(elem){ 
    var type = elem.type; 
    var isOk = false; 
    switch(type){ 
     case 'select' : 
      isOk = elem.value !== 'Select one of the below'; 
     break; 
     case 'text' : 
      isOk = /^(2[0-3])|[01][0-9]:[0-5][0-9]$/.test(elem.value); 
     break; 
    } 
    return isOk; 
}