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.
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:
<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.
"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."
Now over to you:
1 comments:
Click here for commentssir plz write on synchonious chat..
n webcam chat..
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..