JavaScript Validation Using Aspx Page

Step wise step i am showing you how we can validate to the user input Like: textbox, dropdown value etc. using javaScript function.

Step First: I will create a project and into this project i will drag and drop some inputs.

<body>
    <form id="form1" runat="server">
        <table>
            <tr>
                <td> Email * </td>
                <td>
                    <asp:TextBox ID="txtEmail" MaxLength="50" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td> Password * </td>
                <td>
                    <asp:TextBox ID="txtPassword" MaxLength="50" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td> Confirm Password * </td>
                <td>
                    <asp:TextBox ID="txtConfirmPwd" MaxLength="50" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td> Profile Name * </td>
                <td>
                    <asp:TextBox ID="txtProfileName" MaxLength="50" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td> Mobile * </td>
                <td>
                    <asp:TextBox ID="txtMobile" MaxLength="10" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td> Country * </td>
                <td>
                    <asp:DropDownList ID="ddlCountry" runat="server">
                        <asp:ListItem Selected="True" Text="--- Select One ---" Value="0"></asp:ListItem>
                        <asp:ListItem Text="India" Value="1"></asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>   </td>
                <td>
                    <asp:Button ID="btnSave" OnClientClick="return Validate();" runat="server" Text="Save" />
                    <asp:Button ID="btnReset" runat="server" Text="Reset" onclick="btnReset_Click" /> </td>
            </tr>
        </table>
    </form>
</body>

In second step, i will create a css file into css folder.

#wrapper
{
    width: 250 px;
    margin: 50 px auto;
}#msg
{
    display: none;
    position: absolute;
    z - index: 200;
    background: url(.. / images / msg_arrow.gif) left center no - repeat;
    padding - left: 7 px;
}#msgcontent
{
    font: 12 px Verdana,
    Arial,
    Helvetica,
    sans - serif;
    color: Red;
    display: block;
    border - left: none;
    padding: 3 px;
    min - width: 85 px;
    max - width: 300 px;
}#sucessmsgcontent
{
    font: 12 px Verdana,
    Arial,
    Helvetica,
    sans - serif;
    color: Red;
    display: block;
    background:
  #f3e6e6;
    border: 2 px solid
    #924949;
    border-left: none;
    padding: 8px;
    width: 300px;
}

Step Third: Now, i will create a javaScript file into js folder.

// TextBox Should Not Be Empty.
function RequiredTxt(strControlName, strAlertMessage)
{
    if (document.getElementById(strControlName).value.length == 0)
    {
        inlineMsg(strControlName, strAlertMessage, 2);
        document.getElementById(strControlName).value = "";
        document.getElementById(strControlName).focus();
        return true;
    }
    else
    {
        return false;
    }
}
// Valid Email.
function ValidEmail(strControlName, strAlertMessage)
{
    if (document.getElementById(strControlName).value.length != 0)
    {
        if (!document.getElementById(strControlName).value.match(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[­A-Za-z0-9]+$/))
        {
            inlineMsg(strControlName, strAlertMessage, 2);
            document.getElementById(strControlName).focus();
            return true;
        }
        return false;
    }
    return false;
}
// Password Length Between 8 To 12.
function PasswordLength(strControlName, strAlertMessage)
{
    if (document.getElementById(strControlName).value.length < 8)
    {
        inlineMsg(strControlName, strAlertMessage, 2);
        document.getElementById(strControlName).value = "";
        document.getElementById(strControlName).focus();
        return true;
    }
    else
    {
        return false;
    }
}
// Mobile Number Validation
function ValMobile(strControlName, strAlertMessage)
{
    if (document.getElementById(strControlName).value.match(/^[789]\d{9}$/))
    {
        return false;
    }
    else
    {
        document.getElementById(strControlName).value = "";
        inlineMsg(strControlName, strAlertMessage, 2);
        return true;
    }
}
// function for required matching of two textbox
function RequiredMatch(strCtrl1, strCtrl2, strMsg)
{
    if (document.getElementById(strCtrl1).value != document.getElementById(strCtrl2).value)
    {
        inlineMsg(strCtrl2, strMsg, 2);
        document.getElementById(strCtrl2).value = "";
        document.getElementById(strCtrl2).focus();
        return true;
    }
    return false;
}
// build out the divs, set attributes and call the fade function //
function showMsg(target, string, autohide)
{
    var msg;
    var msgcontent;
    if (!document.getElementById('msg'))
    {
        msg = document.createElement('div');
        msg.id = 'msg';
        msgcontent = document.createElement('div');
        msgcontent.id = 'msgcontent';
        document.body.appendChild(msg);
        msg.appendChild(msgcontent);
        msg.style.filter = 'alpha(opacity=0)';
        msg.style.opacity = 0;
        msg.alpha = 0;
    }
    else
    {
        msg = document.getElementById('msg');
        msgcontent = document.getElementById('msgcontent');
    }
    msgcontent.innerHTML = string;
    msg.style.display = 'block';
    var msgheight = msg.offsetHeight;
    var targetdiv = target;
    targetdiv.focus();
    var targetheight = targetdiv.offsetHeight;
    var targetwidth = targetdiv.offsetWidth;
    var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2);
    var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;
    msg.style.top = topposition + 'px';
    msg.style.left = leftposition + 'px';
    clearInterval(msg.timer);
    msg.timer = setInterval("fadeMsg(1)", MSGTIMER);
    if (!autohide)
    {
        autohide = MSGHIDE;
    }
    window.setTimeout("hideMsg()", (autohide * 3000));
}
// build out the divs, set attributes and call the fade function //
function sucessMsg(target, string, autohide)
{
    var msg;
    var sucessmsgcontent;
    if (!document.getElementById('msg'))
    {
        msg = document.createElement('div');
        msg.id = 'msg';
        sucessmsgcontent = document.createElement('div');
        sucessmsgcontent.id = 'sucessmsgcontent';
        document.body.appendChild(msg);
        msg.appendChild(sucessmsgcontent);
        msg.style.filter = 'alpha(opacity=0)';
        msg.style.opacity = 0;
        msg.alpha = 0;
    }
    else
    {
        msg = document.getElementById('msg');
        sucessmsgcontent = document.getElementById('sucessmsgcontent');
    }
    sucessmsgcontent.innerHTML = string;
    msg.style.display = 'block';
    var msgheight = msg.offsetHeight;
    var targetdiv = document.getElementById(target);
    targetdiv.focus();
    var targetheight = targetdiv.offsetHeight;
    var targetwidth = targetdiv.offsetWidth;
    var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2);
    var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;
    msg.style.top = topposition + 'px';
    msg.style.left = leftposition + 'px';
    clearInterval(msg.timer);
    msg.timer = setInterval("fadeMsg(1)", MSGTIMER);
    if (!autohide)
    {
        autohide = MSGHIDE;
    }
    window.setTimeout("hideMsg()", (autohide * 2500));
}
// build out the divs, set attributes and call the fade function //
function inlineMsg(target, string, autohide)
{
    // alert("inlineMsg");
    var msg;
    var msgcontent;
    if (!document.getElementById('msg'))
    {
        msg = document.createElement('div');
        msg.id = 'msg';
        msgcontent = document.createElement('div');
        msgcontent.id = 'msgcontent';
        document.body.appendChild(msg);
        msg.appendChild(msgcontent);
        msg.style.filter = 'alpha(opacity=0)';
        msg.style.opacity = 0;
        msg.alpha = 0;
    }
    else
    {
        msg = document.getElementById('msg');
        msgcontent = document.getElementById('msgcontent');
    }
    msgcontent.innerHTML = string;
    msg.style.display = 'block';
    var msgheight = msg.offsetHeight;
    var targetdiv = document.getElementById(target);
    targetdiv.focus();
    var targetheight = targetdiv.offsetHeight;
    var targetwidth = targetdiv.offsetWidth;
    var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2);
    var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;
    msg.style.top = topposition + 'px';
    msg.style.left = leftposition + 'px';
    msg.cssName = "errormsg";
    // alert(msg.style.top + " : " + msg.style.left + " : " + msg.cssName);
    clearInterval(msg.timer);
    msg.timer = setInterval("fadeMsg(1)", MSGTIMER);
    if (!autohide)
    {
        autohide = MSGHIDE;
    }
    window.setTimeout("hideMsg()", (autohide * 1000));
}
// hide the form alert //
function hideMsg(msg)
{
    var msg = document.getElementById('msg');
    if (!msg.timer)
    {
        msg.timer = setInterval("fadeMsg(0)", MSGTIMER);
    }
}
// face the message box //
function fadeMsg(flag)
{
    if (flag == null)
    {
        flag = 1;
    }
    var msg = document.getElementById('msg');
    var value;
    if (flag == 1)
    {
        value = msg.alpha + MSGSPEED;
    }
    else
    {
        value = msg.alpha - MSGSPEED;
    }
    msg.alpha = value;
    msg.style.opacity = (value / 100);
    msg.style.filter = 'alpha(opacity=' + value + ')';
    if (value >= 99)
    {
        clearInterval(msg.timer);
        msg.timer = null;
    }
    else if (value <= 1)
    {
        msg.style.display = "none";
        clearInterval(msg.timer);
    }
}
// calculate the position of the element in relation to the left of the browser //
function leftPosition(target)
{
    var left = 0;
    if (target.offsetParent)
    {
        while (1)
        {
            left += target.offsetLeft;
            if (!target.offsetParent)
            {
                break;
            }
            target = target.offsetParent;
        }
    }
    else if (target.x)
    {
        left += target.x;
    }
    return left;
}
// calculate the position of the element in relation to the top of the browser window //
function topPosition(target)
{
    var top = 0;
    if (target.offsetParent)
    {
        while (1)
        {
            top += target.offsetTop;
            if (!target.offsetParent)
            {
                break;
            }
            target = target.offsetParent;
        }
    }
    else if (target.y)
    {
        top += target.y;
    }
    return top;
}
// preload the arrow //
if (document.images)
{
    arrow = new Image(7, 80);
    arrow.src = "images/msg_arrow.gif";
}

Step Four: Now, i will call javascript js file on page header section.

<head runat="server">
    <title>Registration</title>
    <link rel='stylesheet' type='text/css' href="CSS/Message.css" />
    <script type='text/javascript' src="JS/InputValidation.js"></script>
    <script language="javascript" type="text/javascript">
    function Validate()
    {
        if (RequiredTxt('txtEmail', 'Email is required.'))
        {
            return false;
        }
        if (ValidEmail('txtEmail', 'Please enter valid email Address.'))
        {
            return false;
        }
        if (RequiredTxt('txtPassword', 'Password is required.'))
        {
            return false;
        }
        if (PasswordLength('txtPassword', 'Password length should be 8 character.'))
        {
            return false;
        }
        if (RequiredMatch('txtPassword', 'txtConfirmPwd', 'Password and confirm password dismatch.'))
        {
            return false;
        }
        if (RequiredTxt('txtProfileName', 'Profile Name is required.'))
        {
            return false;
        }
        if (RequiredTxt('txtMobile', 'Mobile number is required.'))
        {
            return false;
        }
        if (ValMobile('txtMobile', 'Please enter only numbers.'))
        {
            return false;
        }
        if (RequiredDDl('ddlCountry', 'Please select country.'))
        {
            return false;
        }
        return true;
    }
    </script>
</head>

Step Five: Call on will call those function on buttonclick like:

OnClientClick="return Validate();"
<asp:Button ID="btnSave" OnClientClick="return Validate();" runat="server" Text="Save" />

Debug the application Press F5.

Step Seven: In this screen client validation will popup for the small time duration we can increase it from JavaScript function.