ASP.Net textbox onblur event

Question

I have a textbox, whose values I need to validate (if value of textbox is 50, then display message in lblShowMsg) when the user tabs out of the textbox (onBlur event). I can't seem to get the syntax right.

I have this code on my pageload event:

protected void Page_Load(object sender, EventArgs e)
{
    txtCategory.Attributes.Add("onblur", "validate()"); 

}

But I can't seem to get the javascript code correct. Any suggestions?

why are you adding the attribute onblur on the fly and not in the markup? — awright18, Mar 05 '10 at 03:13

score 9 · Accepted Answer · edited Aug 24 '15 at 15:06

In the Code behind: (VB.NET)

On the page load event

txtAccountNumber.Attributes["onBlur"] = "IsAccNumberValid(" & txtAccountNumber.ClientID & ")";

Where txtAccountNumber is the ID of the TextBox in the markup page and you pass the ClientID of the textbox because JavaScript is client side not server side. And now in the markup page(.aspx) have this javascript in the head section of the page:

<script type="text/javascript">                     
function IsAccNumberValid(txtAccountNumber) {                                             
    if (txtAccountNumber.value.length < 6) {    
                      alert(txtAccountNumber.value);
            }    
        }    
</script>

Here is the C# Version: ddlCompanies.Attributes["onBlur"] = "AddNewCompany1(" + ddlCompanies.ClientID + ")"; — Danimal111, Feb 28 '14 at 23:17

score 5 · Answer 2 · answered Mar 05 '10 at 03:04

5

Is that the actual code in your Page_Load? You need to use the name of the control, and not the type name for TextBox. For example, you may want to try:

 textBox1.Attributes.Add("onblur", "validate();");

where "textBox1" is the ID you assigned to the textBox in your markup instead.

Also, from Javascript, it's very possible that the ID of the textBox has changed once it gets rendered to the page. It would be better if you would pass the control to the validate function:

function validate(_this)
{
    if (_this.value == "50")
        // then set the ID of the label.  
}

Then you would set the attribute like this:

textBox1.Attributes.Add("onblur", "validate(this);");

Lastly, I would strongly recommend using the JQuery library if you're doing anything in Javascript. It will make your life 10x easier.

answered Mar 05 '10 at 03:04

David Morton

16,338
3
63
73

Sorry, that was a typo on my part. The ID of the txtBox is txtCategory – LearningCSharp Mar 05 '10 at 03:09
When I run the code as you show it above (no JQuery), I get an error message "Microsoft JScript runtime error: 'document.form1.lblShowMsg' is null or not an object" – LearningCSharp Mar 05 '10 at 03:17
Again, part of the problem is that the label you're wanting to use is more than likely renamed to something else. Use something like Developer Tools in IE or FireBug in Firefox to hunt down the _actual_ ID of the label on the form. Both of those tools will let you peck through the DOM. Once you find it, use document.getElementById("id of element here") to fetch the element, and then you can set it's innerHTML property in Javascript. – David Morton Mar 05 '10 at 10:52
I used Developer Tools, and I can see that the label has the same ID value of lblFSCText; I would think that such a basic functionality of validating onblur, wouldn't be so complicated in such an advanced language; – LearningCSharp Mar 05 '10 at 15:10
document.getElementById("lblFSCText").innerHTML = "Valid"; – David Morton Mar 05 '10 at 16:35
didn't work. Still getting the document.getElementByID(...) is null or not an object; I understand what you mean by the object being renamed to anothr ID, but in Dev Tools, it does have the same ID. – LearningCSharp Mar 05 '10 at 16:56
JQuery is being depreciated or obsolete now. Just a FYI! – fletchsod May 12 '20 at 19:39

score 2 · Answer 3 · edited May 27 '14 at 09:59

This works.

Textbox1.Attributes.Add("onblur","javascript:alert('aaa');");

Make sure that functiion lies in the script part of the page.

My page

<script type="text/javascript">
    function Validate() {

        alert('validate');

    }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="Textbox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
    </form>
</body>
</html>

code behind

public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Textbox1.Attributes.Add("onblur","Validate();");
        }
    }

Don't need an alert; Need to display a msg in a label; (lblShowMsg.visible = true) — LearningCSharp, Mar 05 '10 at 03:10

ASP.Net textbox onblur event

3 Answers3

Linked