How to show Validation guidelines in web forms using JavaScript in Asp.net ?

Introduction: In previous articles i explained how to show Message box in asp.net website using JavaScript and  Highlight gridview row on mouse over using CSS in asp.net and  How to show tool tip message using CSS and HTML in asp.net website. and  how to redirect visitor from one website to another website using java script and How to call java script function from code behind file in asp.net. 
In this article I will explain how to show validation guidelines to the user while filling forms like contact us form, login form etc. Whenever user takes mouse cursor on the text boxes it display what to enter in that textbox. So it is very user friendly because user get to know what to enter and in what format to enter the value in fields. Lets understand using JavaScript.
  • It will look like this:  
http://webcodeexpert.blogspot.in/
Implementation: Let's create an example to see it in action.
  • In the design page (.aspx) write the JavaScript functions in the Head tag as: 
<head runat="server">
    <title>Validation Guideline Demo</title>
        
     <%-- validation guideline starts here--%>
<style type="text/css">

#hintbox{ /*CSS for pop up hint box */
position:absolute;
top: 0;
background-color: #f2a713;
width: 150px; /*Default width of hint.*/
padding: 3px;
border:1px solid black;
font:normal 11px Verdana;
line-height:18px;
z-index:100;
border-right: 3px solid black;
border-bottom: 3px solid black;
visibility: hidden;
color:#ffffff
}

.hintanchor{ /*CSS for link that shows hint onmouseover*/
font-weight: bold;
color: navy;
margin: 3px 8px;
}

    </style>

<script type="text/javascript">   
  
    var horizontal_offset = "9px" //horizontal offset of hint box from anchor link

    /////No further editting needed

    var vertical_offset = "0" //horizontal offset of hint box from anchor link. No need to change.
    var ie = document.all
    var ns6 = document.getElementById && !document.all

    function getposOffset(what, offsettype) {
        var totaloffset = (offsettype == "left") ? what.offsetLeft : what.offsetTop;
        var parentEl = what.offsetParent;
        while (parentEl != null) {
            totaloffset = (offsettype == "left") ? totaloffset + parentEl.offsetLeft : totaloffset + parentEl.offsetTop;
            parentEl = parentEl.offsetParent;
        }
        return totaloffset;
    }

    function iecompattest() {
        return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body
    }

    function clearbrowseredge(obj, whichedge) {
        var edgeoffset = (whichedge == "rightedge") ? parseInt(horizontal_offset) * -1 : parseInt(vertical_offset) * -1
        if (whichedge == "rightedge") {
            var windowedge = ie && !window.opera ? iecompattest().scrollLeft + iecompattest().clientWidth - 30 : window.pageXOffset + window.innerWidth - 40
            dropmenuobj.contentmeasure = dropmenuobj.offsetWidth
            if (windowedge - dropmenuobj.x < dropmenuobj.contentmeasure)
                edgeoffset = dropmenuobj.contentmeasure + obj.offsetWidth + parseInt(horizontal_offset)
        }
        else {
            var windowedge = ie && !window.opera ? iecompattest().scrollTop + iecompattest().clientHeight - 15 : window.pageYOffset + window.innerHeight - 18
            dropmenuobj.contentmeasure = dropmenuobj.offsetHeight
            if (windowedge - dropmenuobj.y < dropmenuobj.contentmeasure)
                edgeoffset = dropmenuobj.contentmeasure - obj.offsetHeight
        }
        return edgeoffset
    }

    function showhint(menucontents, obj, e, tipwidth) {
        if ((ie || ns6) && document.getElementById("hintbox")) {
            dropmenuobj = document.getElementById("hintbox")
            dropmenuobj.innerHTML = menucontents
            dropmenuobj.style.left = dropmenuobj.style.top = -500
            if (tipwidth != "") {
                dropmenuobj.widthobj = dropmenuobj.style
                dropmenuobj.widthobj.width = tipwidth
            }
            dropmenuobj.x = getposOffset(obj, "left")
            dropmenuobj.y = getposOffset(obj, "top")
            dropmenuobj.style.left = dropmenuobj.x - clearbrowseredge(obj, "rightedge") + obj.offsetWidth + "px"
            dropmenuobj.style.top = dropmenuobj.y - clearbrowseredge(obj, "bottomedge") + "px"
            dropmenuobj.style.visibility = "visible"
            obj.onmouseout = hidetip
        }
    }

    function hidetip(e) {
        dropmenuobj.style.visibility = "hidden"
        dropmenuobj.style.left = "-500px"
    }

    function createhintbox() {
        var divblock = document.createElement("div")
        divblock.setAttribute("id", "hintbox")
        document.body.appendChild(divblock)
    }

    if (window.addEventListener)
        window.addEventListener("load", createhintbox, false)
    else if (window.attachEvent)
        window.attachEvent("onload", createhintbox)
    else if (document.getElementById)
        window.onload = createhintbox

</script>
<%--validation guideline ends here--%>
</head> 
  • Now in the Body tag create the form as:
<table border="0" cellpadding="0" cellspacing="5" width="100%">

                        <tr>
                            <td align="left">
                                Name:</td>
                            <td >
                                <asp:TextBox ID="txtName" runat="server"  onFocus="showhint('Please enter your Name e.g. Lalit Raghuvanshi', this, event, '150px')" onMouseover="showhint('Please enter your Name e.g. Lalit Raghuvanshi', this, event, '150px')"></asp:TextBox></td>
                           
                        </tr>                       
                        <tr>
                            <td align="left" >
                                Email ID:</td>
                            <td align="left">
                                <asp:TextBox ID="txtEmailId" runat="server"   onFocus="showhint('Please enter valid email id in correct format e.g example@yahoo.com', this, event, '150px')" onMouseover="showhint('Please enter valid email id in correct format e.g example@yahoo.com', this, event, '150px')"></asp:TextBox></td>
                        </tr>                       
                        <tr>
                            <td align="left" valign="top">
                                Address:</td>
                            <td align="left">
                                <asp:TextBox ID="txtAddress" runat="server"  
                                    onFocus="showhint('Please enter your address e.g. H.no: 1234 MyColony', this, event, '150px')"
                                    onMouseover="showhint('Please enter your address e.g. H.no: 1234 MyColony', this, event, '150px')"
                                    Columns="25" Rows="6" TextMode="MultiLine"></asp:TextBox></td>
                        </tr>                                          
                        <tr>
                            <td align="left" >
                                City:</td>
                            <td align="left">
                                <asp:TextBox ID="txtCity" runat="server"   onFocus="showhint('Please enter your city e.g panchkula', this, event, '150px')" onMouseover="showhint('Please enter your city e.g panchkula', this, event, '150px')"></asp:TextBox></td>
                        </tr>                       
                        <tr>
                            <td align="left" >
                                State</td>
                            <td align="left">
                                <asp:TextBox ID="txtState" runat="server"   onFocus="showhint('Please enter your state e.g haryana', this, event, '150px')" onMouseover="showhint('Please enter your state e.g haryana', this, event, '150px')"></asp:TextBox></td>
                        </tr>                            
                        <tr>
                            <td align="left" >
                                Contact Numbers:</td>
                            <td align="left">
                                <asp:TextBox ID="txtPhone" runat="server"   onFocus="showhint('Please enter your valid mobile or landline number', this, event, '150px')" onMouseover="showhint('Please enter your valid mobile or landline number', this, event, '150px')"></asp:TextBox></td>
                        </tr>                 
                        <tr>
                            <td align="left" valign="top">
                                Comments:</td>
                            <td align="left">
                                <asp:TextBox ID="txtComments" runat="server" TextMode="MultiLine" Rows="6" Columns="25" onFocus="showhint('Please enter your message/comments', this, event, '150px')" onMouseover="showhint('Please enter your message/comments', this, event, '150px')"></asp:TextBox></td>
                        </tr>                    
                        <tr align="center">
                            <td >
                            </td>
                            <td align="left">
                                <asp:Button ID="btnSUbmit" runat="server" Text="Submit" /></td>
                        </tr>                                      
                        </table>
Now run the application and see the results.


Now over to you:
"If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."
Previous
Next Post »

1 comments:

Click here for comments
Unknown
admin
March 11, 2014 ×

sir plz write on synchonious chat..
n webcam chat..

Congrats bro Unknown you got PERTAMAX...! hehehehe...
Reply
avatar

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..