Client side Email Address Validation Using Javascript in Asp.Net C# VB.Net apsx page

Email address validation is a most common scenario for applications. It will be the best if we can use Javascript validation along with server side validation since user may off javascript from browser settings. The following example shows how you can validate an email address for an Asp.net aspx page/form. The script is cross browser compatible (works for all browsers such as IE, Firefox, Opera, Google Chrome).

Related Post:
JQuery to Validate Email Address using Regular Expression in Asp.Net C# VB.Net

Javascript email validation using regular expression:
Here i tried to find out a simple solution to prohibit users to enter wrong email address. There is a lot of scope here to modify the regular expression as well as CSS. To do that you have to learn regular expression syntax clearly. Now add the below Javascript Email Address Validation Function within your head tag or within the content tag for child page:

    function validateEmail() {
        var regex = /^[a-zA-Z0-9._-]+@([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,4}$/;
        alert(regex.test(document.getElementById('<%= txtEmail.ClientID %>').value));
    }

To test the Function add below Asp.Net Server Controls:

<asp:TextBox ID='txtEmail' runat="server"></asp:TextBox><br />
<asp:Button id="cmdTest" runat="server" Text="Check Email Address" OnClientClick="validateEmail();" />

Email address validation completed now. Run the project & experience below outcome:
Javascript_Email_Address_validation

So simple. Am I right? OK now we want to modify a little bit better for look & feel. Modify the Javascript validation function like below:

    function validateEmail_Ext() {
        var obj = document.getElementById('<%= txtEmail.ClientID %>');
        var regex = /^[a-zA-Z0-9._-]+@([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,4}$/;
        if (regex.test(obj.value)) {
            //You can also assign stylesheet by
            //obj.className='....';
            obj.style.backgroundColor = '';
            obj.style.backgroundColor = '';
            return true;
        }
        else {
            //Changing Background Color, so that user can understand that its invalid
            //You can also assign stylesheet by
            //obj.className='....';
            obj.style.backgroundColor = '#FD5E53';
            obj.style.borderColor = '#CD4A4A';
            return false;
        }
    }

Now invoke the method like below:

<asp:TextBox ID='txtEmail' runat="server"></asp:TextBox><br />
<%--<asp:Button id="cmdTest" runat="server" Text="Check Email Address" OnClientClick="validateEmail();" /><br />--%>
<asp:Button id="cmdTest_Ext" runat="server" Text="Check Email Address Extended" OnClientClick="return validateEmail_Ext();" />

Now run the project. Hope you will get a bit better experience:
Javascript_Email_Address_validation_Extended

Hope now you can easily incorporate Javascript Email Validation in your Asp.Net C# VB.Net project with one go.

Download Code Example C#        Download Code Example VB.Net

One thought on “Client side Email Address Validation Using Javascript in Asp.Net C# VB.Net apsx page

  • April 23, 2016 at 3:26 pm
    Permalink

    super like… nice work

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code