如何将带有警报消息的验证更改为在文本框周围带有红色边框的验证？

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>