Use “onblur” javascript event to validate aspx page textbox

Download sample here

“onblur” this is an javascript event it’s functionality is when you comes out of the text field then it will fire.

This is the nature of “onblur”. It is having a fine drawback which I was faced. That drawback is if you want to validate two textboxes one after one if you use this event it will with out entering any values if you move to nextbox it will validate fine. My condition is when a required field is empty it should show an error message and the focus should go to empty field. I written code for this like bellow.

 

function ValidateName() {
        var gName = $get(‘<%= txtName.ClientID %>’);
        if (gName.value == “”) {
            alert(“Name should not be empty”);
            gName.focus();
        }

function ValidateAge() {
        var gName = $get(‘<%= txtAge.ClientID %>’);
        if (gName.value == “”) {
            alert(“Age should not be empty”);
            gName.focus();
        }
    }

 

what happen is when I use this code it given me a problem. I didn’t enter value in “txtName” field and pressed tab button then it given me an alert box and told me that “Name Should not be empty”. I felt Okay it’s working properly then I clicked on Okay button then next alert message displayed that “Age Should not be empty”. I confused when happen I didn’t go to Age text field why it is displaying this alert box, for checking the code I click on Okay button for that alert button too then first error message and next and so on. It seems like a Infinite loop for those fields. 

 

Then I posted this problem in MSDN forums one guy explained me the problem. I didn’t think in that manner. Any have I will explain the problem. When I pressed on tab button control is by default moving to next control that is Age textbox that time validation is going on that first box is empty or not If Yes it is displaying error message. The next statement is I try focus the cursor in Name field so it try to put the cursor into that field next field also having “onblur” event then It fired and displaying me the error and so on.

For this problem I have written another method to solve the problem. That is mentioned bellow.

 

function validateFirstName(data,fieldName) {
    var x = data.value;
    if (x == null || x == “”) {
        alert(fieldName + ” cannot be left blank.”);
        data.focus();
        return;
    }
}
function validate(data, fieldName, oldvalue) {
    var x = data.value;
    var y = oldvalue.value;
    if (y == null || y == “”) {
        //oldvalue.focus();
    }
    else {
        if (x == null || x == “”) {
            alert(fieldName + ” cannot be left blank.”);
            data.focus();
        }
    }
}

 

In this I am validating the first field normally. From next field onwards I am using second method so It will first validate the Previous field if it is also empty It wont do anything. So no problem we can do our work.

 

<div style=”width:100%;”>
            <span style=”width:50%;”>First Name :</span>
            <asp:TextBox ID=”txtFirstName” runat=”server” style=”width:50%;” onblur=”validateFirstName(this,’First Name’);” />
        </div><br />
        <div style=”width:100%;”>
            <span style=”width:50%;”>Last Name :</span>
            <asp:TextBox ID=”txtLastName” runat=”server” style=”width:50%;” onblur=”validate(this,’Last Name’,document.getElementById(‘txtFirstName’))” />
        </div><br />
        <div style=”width:100%;”>
            <span style=”width:50%;”>Primary EMail :</span>
            <asp:TextBox ID=”txtPrimaryEmail” runat=”server” style=”width:50%;” onblur=”validate(this,’Primary Email’,document.getElementById(‘txtLastName’))” />
        </div><br />

 

This is the code. I used to validate. You can download the sample code form above link.

Advertisements

About tvskumar2000

Tvs always cooooool
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s