Change TextBox border color if TextBox is empty using jQuery in ASP.Net

SaChie
 
on Jul 02, 2018 12:02 AM
Sample_166252.zip
9843 Views

Hi, how do I highlight the border of a textbox if the user leave it empty?

I want to implement something like if the user tries to save the form with the an empty textbox, the border of the textbox will highlight.

Download FREE API for Word, Excel and PDF in ASP.Net: Download
pandeyism
 
on Jul 02, 2018 12:58 AM

Hi SaChie,

Please take reference the below code and  correct your code.

HTML

<div>
    Name:
    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="rfvtxtName" runat="server" ControlToValidate="txtName"
        ErrorMessage="Please Enter Name"></asp:RequiredFieldValidator>
    <br />
    <asp:Button ID="btnValidate" runat="server" Text="Submit" OnClientClick="Validate();" />
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    function Validate() {
        var name = document.getElementById("txtName").value;
        if (name == "") {
            $("#txtName").css("border", "1px solid red");
            $("#txtName").focus();
        }
    }
</script>

Screenshot