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

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>