How to validate user input using JavaScript ?

In this article I have explained in detail about JavaScript validation. Most of the beginner want to know about JavaScript validation I cover all validation part in this article. In this article I separately explain JavaScript validation using ASCII Code and Regular expression like Alpha character only allowed / Alpha numeric character and email validation etc.

Description
Below code samples covert ASCII CODE Validation and Regular Expression Validations

JavaScript Validation using ASCII code:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JS_validations.aspx.cs" Inherits="JS_validations" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Javascript validations</title>
<script language="JavaScript" src="JScript.js" type="text/javascript"></script> 
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table cellpadding="0" cellspacing="0" align="center" width="650">
        <tr>
        <td colspan="2" height="40"><b>Javascript TextBox Validations</b></td>
        </tr>
            <tr>
                <td height="40" align="left" width="40%">
                    Alpha Validation
                </td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server" onkeyPress="return Alpha(event);"></asp:TextBox> 
                    Enter only a-z A-Z 
                </td>
            </tr>
            <tr> 
                <td height="40" align="left">
                    AlphaNumeric Validation
                </td>
                <td>
                    <asp:TextBox ID="TextBox2" runat="server" onkeyPress="return AlphaNumeric(event);"></asp:TextBox> 
                    Enter only a-z A-Z 0-9 
                </td>
            </tr>
            <tr>
                <td height="40" align="left">
                    AlphaNumericSpec Validation
                </td>
                <td>
                    <asp:TextBox ID="TextBox3" runat="server" onkeyPress="return AlphaNumericSpec(event);"></asp:TextBox> 
                     Enter chartecters except ` ' ~ 
                </td>
            </tr>
            <tr>
                <td height="40" align="left">
                    SingleQuote Validation
                </td>
                <td>
                    <asp:TextBox ID="TextBox4" runat="server" onkeyPress="return SingleQuote(event);"></asp:TextBox> 
                    Enter chartecters except '
                </td>
            </tr>
            <tr>
                <td height="40" align="left">
                    NumberKey Validation
                </td>
                <td>
                    <asp:TextBox ID="TextBox5" runat="server" onkeyPress="return NumberKey(event);"></asp:TextBox> 
                     Enter only 0-9
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

JScript.js


//Allow only alpha charecter a-z A-Z Space Delete BackSpace

function Alpha(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || charCode == 127 || charCode == 8 || charCode == 32) {
        return true;
    }
    else {
        return false;
    }
}

//Allow only alpha and Numeric charecter a-z A-Z 0-9 Space Delete BackSpace
function AlphaNumeric(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 64 && charCode < 91 || charCode > 96 && charCode < 123 || charCode > 47 && charCode < 58 || charCode == 127 || charCode == 8 || charCode == 32) {
        return true;
    }
    else {
        return false;
    }
}

//Allow all charecter except ' ` ~
function AlphaNumericSpec(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode == 39 || charCode == 96 || charCode == 126) {
        return false;
    }
    else {
        return true;
    }
}

//Allow all charcter except not allow only '
function SingleQuote(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode == 39) {
        return false;
    }
    else {
        return true;
    }
}

//Allow only numeric charecters 0-9 and  backspace delete

function NumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 47 && charCode < 58 || charCode == 127 || charCode == 8) {
        return true;
    }
    else {
        return false;
    }
}

JavaScript Validation using Regular Expression code:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JS_ValidationUsingRegEx.aspx.cs" Inherits="JS_ValidationUsingRegEx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Javascript validations using Regular Expression</title>
<script language="JavaScript" src="JScript_RegEx.js" type="text/javascript"></script> 
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table cellpadding="0" cellspacing="0" align="center" width="650">
        <tr>
        <td colspan="2" height="40"><b>Javascript TextBox Validations using Regular Expression</b></td>
        </tr>
            <tr>
                <td height="40" align="left" width="40%">
                    Alpha Validation
                </td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server" onkeyPress="return Alpha(event);"></asp:TextBox> 
                    Enter only a-z A-Z 
                </td>
            </tr>
            <tr> 
                <td height="40" align="left">
                    AlphaNumeric Validation
                </td>
                <td>
                    <asp:TextBox ID="TextBox2" runat="server" onkeyPress="return AlphaNumeric(event);"></asp:TextBox> 
                    Enter only a-z A-Z 0-9 
                </td>
            </tr>
            <tr>
                <td height="40" align="left">
                    AlphaNumericSpec Validation
                </td>
                <td>
                    <asp:TextBox ID="TextBox3" runat="server" onkeyPress="return AlphaNumericSpec(event);"></asp:TextBox> 
                     Enter chartecters except ` ' ~ 
                </td>
            </tr>
            <tr>
                <td height="40" align="left">
                    Quote Validation
                </td>
                <td>
                    <asp:TextBox ID="TextBox4" runat="server" onkeyPress="return SingleQuote(event);"></asp:TextBox> 
                    Enter chartecters except '
                </td>
            </tr>
            <tr>
                <td height="40" align="left">
                    NumberKey Validation
                </td>
                <td>
                    <asp:TextBox ID="TextBox5" runat="server" onkeyPress="return NumberKey(event);"></asp:TextBox> 
                     Enter only 0-9 
                </td>
            </tr>      
             <tr>
                <td height="40" align="left">
                 Email Id validation
                </td>
                <td>
                    <asp:TextBox ID="TextBox6" runat="server" onblur="return valemail('TextBox6');"></asp:TextBox> 
                     valid email only
                </td>
            </tr>           
        </table>        
    </div>
    </form>
</body>
</html>

JScript_RegEx.js


//Allow only alpha charecter a-z A-Z Space Delete BackSpace

function Alpha(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    //Mention below allowed charecter a-z A-Z space=' '

    var allowchar = /^([a-zA-Z ])$/;
    if (allowchar.test(String.fromCharCode(charCode)) == true) {
        return true;
    }
    else {
        return false;
    }
}

//Allow only alpha and Numeric charecter a-z A-Z 0-9 Space Delete BackSpace
function AlphaNumeric(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    var allowchar = /^([a-zA-Z0-9 ])$/;
    if (allowchar.test(String.fromCharCode(charCode)) == true) {
        return true;
    }
    else {
        return false;
    }
}

//Allow all charecter except ' ` ~
function AlphaNumericSpec(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    var allowchar = /^(["'`~"])$/;
    if (allowchar.test(String.fromCharCode(charCode)) == true) {
        return false;
    }
    else {
        return true;
    }
}

//Allow all charcter except not allow only '
function SingleQuote(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    var allowchar = /^(["'"])$/;
    if (allowchar.test(String.fromCharCode(charCode)) == true) {
        return false;
    }
    else {
        return true;
    }
}

//Allow only numeric charecters 0-9 and  backspace delete

function NumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    var allowchar = /^([0-9])$/;
    if (allowchar.test(String.fromCharCode(charCode)) == true) {
        return true;
    }
    else {
        return false;
    }
}
//Function to validate email id
function valemail(id)
{           
            var r=/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            var reg = /^[0-9]+$/;           
            if(r.test(document.getElementById(id).value) == false) 
            {
                alert('Invalid Email Address');
                return false;
            }       
}

Output
Output

Source Code Detail:
Here with I have attached source code of Javascript validation with ascii code and regular expression example download and try to learn this concept.
Front End : ASP.NET

Conclusion:
I hope this article help to know Javascript validation with ascii code and regular expression.

Attachments

Source Code (43590-191835-JSValidation.rar)

How to validate user input using JavaScript ?

JavaScript Validation using ASCII code:

JavaScript Validation using Regular Expression code:

Attachments

Comments

About dotnetspider.com

Quick Links

General

Services