Question

我可以使用以下脚本验证gridview控件中动态生成的文本框：

<script type="text/javascript">
function ValidateEmptyValue() { 
    var gv = document.getElementById("<%= Gridview1.ClientID %>"); 
    var tb = gv.getElementsByTagName("input"); 

    for (var i = 0; i < tb.length; i++) { 
        if (tb[i].type == "text") { 
            if (tb[i].value < 1) { 
                 alert("Field cannot be blank!");
                return false; 
            } 
        } 
    } 
    return true; 
}
</script>

这很好用。

但是，我想改变

alert("Field cannot be blank!");

到

文本框周围的红色边框？

提前致谢

        <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
            <label ID="lblTitle">Your title<span style="color:#ff0000">*</span></label><br />
            <asp:RequiredFieldValidator id="RequiredFieldValidator2" Font-Bold="true" 
                BorderColor="Red" BorderWidth="1" SetFocusOnError="true" 
            runat="server" 
            Height="16px" ErrorMessage="REQUIRED FIELD" ControlToValidate="txtsourcename" />
                <asp:TextBox ID="txtsourcename" runat="server" style="width:200px;"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Adress">
            <ItemTemplate>
                <asp:TextBox ID="txtsourceaddress" runat="server" style="width:200px;"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Income">
            <ItemTemplate>
                 <asp:TextBox ID="txtsourceincome" runat="server" style="width:200px;"></asp:TextBox>
            </ItemTemplate>

    '//generated HTML code
<table cellspacing="0" rules="all" border="1" id="Gridview1" style="border-collapse:collapse;">
    <tr>
        <th scope="col">Name</th><th scope="col">Adress</th><th scope="col">Income</th><th scope="col">&nbsp;</th>
    </tr><tr>
        <td>
            <label ID="lblTitle">Your title<span style="color:#ff0000">*</span></label><br />
            <span id="Gridview1_RequiredFieldValidator2_0" style="display:inline-block;border-color:Red;border-width:1px;border-style:solid;font-weight:bold;height:16px;visibility:hidden;">REQUIRED FIELD</span>
                <input name="Gridview1$ctl02$txtsourcename" type="text" id="Gridview1_txtsourcename_0" style="width:200px;" />
            </td><td>
                <input name="Gridview1$ctl02$txtsourceaddress" type="text" id="Gridview1_txtsourceaddress_0" style="width:200px;" />
            </td><td>
                 <input name="Gridview1$ctl02$txtsourceincome" type="text" id="Gridview1_txtsourceincome_0" style="width:200px;" />
            </td><td><a href="javascript:__doPostBack(&#39;Gridview1&#39;,&#39;Delete$0&#39;)">Delete</a></td>
    </tr><tr>
        <td>&nbsp;</td><td>&nbsp;</td><td align="right">
             <input type="submit" name="Gridview1$ctl03$ButtonAdd" value="Add More" onclick="return ValidateEmptyValue();WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;Gridview1$ctl03$ButtonAdd&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="Gridview1_ButtonAdd" />
            </td><td>&nbsp;</td>
    </tr>
</table>

Answer 1

由于您需要更改输入字段的样式属性，请使用style.border。

以下是您的代码的更新版本。

<script type="text/javascript">
function ValidateEmptyValue() { 
    var is_valid = true,
        gv = document.getElementById("<%= Gridview1.ClientID %>"),
        tb = gv.getElementsByTagName("input");

    for (var i = 0; i < tb.length; i++) { 
        if (tb[i].type == "text") { 
            if (tb[i].value < 1) { 
                tb[i].style.border = "solid 1px red";
                is_valid = false;
            } 
        }
    }

    return is_valid;
}
</script>

如何使用警告消息将验证更改为使用文本框周围的红色边框进行验证？

1 个答案: