FCK Editor Validation

Here is a good example for FCK editor validation.

Declare a Custom Validator;

<asp:CustomValidator runat="server" ID="cvBody" SetFocusOnError="true" Display="dynamic" Text="The Body is required" ClientValidationFunction="ValidateContentText"></asp:CustomValidator>

Add this Javascript function to your page

function ValidateContentText(source,args)
{
var fckBody= FCKeditorAPI.GetInstance('<%=FCKeditor1.ClientID %>');
args.IsValid = fckBody.GetXHTML(true) != "";
}

Ref: “fck validation

Advertisements

Email validator : Javascript

Here goes the javascript function to check whether the entered text 
is in the format of email. 
A good one.



function validate()

{

  if (echeck(document.getElementById(“email”).value)==false)
  {
    alert(“Please enter a valid e-mail address”);

    document.getElementById(“email”).focus();

    return false;
  }
return true;
}

function echeck(str)
{
  var at=”@”
  var dot=”.”
  var lat=str.indexOf(at)
  var lstr=str.length
  var ldot=str.indexOf(dot)
  if (str.indexOf(at)==-1)
  {
    return false
  }

  if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr)
  {
    return false
  }

  if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr)
  {
    return false
  }

  if (str.indexOf(at,(lat+1))!=-1)
  {
    return false
  }

  if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot)
  {
    return false
  }

  if (str.indexOf(dot,(lat+2))==-1)
  {
    return false
  }

  if (str.indexOf(” “)!=-1)
  {
    return false
  }

  if(lstr-ldot==1)
  {
    return false
  }

  return true
}

Add to Bookmark/Favourites : Javascript

As we know, every browsers comes with a functionality to Bookmark/Favourite the current page we are visiting. But most of the users not even think about this feature. Sometimes we can set a link or button or any other control in your mind, in order to remind the user to add the page in their Bookmark/Favourite list. Here goes a simple javascript function that will add the current page in to the users Bookmark/Favourite list.

Use this javascript inside your <Head> tag.


<script language=”javascript” type=”text/javascript”>

function AddFavorite_onclick()
{
    BookmarkTitle = “Silent Killer”;
    BookmarkURL = “https://binzthomas.wordpress.com/&#8221;;

if (window.sidebar)
{ // Bookmark for Mozilla Firefox
    window.sidebar.addPanel(BookmarkTitle, BookmarkURL,””);
}
else if( window.external )
{ // IE’s Favorite
    window.external.AddFavorite( BookmarkURL, BookmarkTitle);
}
else if(window.opera && window.print)
{ // Opera Hotlist
    var element = document.createElement(“a”);
    element.setAttribute(“href”, BookmarkURL);
    element.setAttribute(“title”, BookmarkTitle);
    element.setAttribute(“rel”, “sidebar”);
    element.click();
}
}
</script>

Now add the <a> tag inside the <body> . We are going to add the link text dynamically according to the browser we are using. That means, in IE we have Favourites and in Mozilla it is Bookmarks. So the link will display Add to Favorites in IE and Bookmark Page in Mozilla.

<a href=”javascript:AddFavorite_onclick() ” id=’link’ ></a>


<script language=”javascript” type=”text/javascript”>

if (document.all)
{   
    document.getElementById(‘link’).innerHTML=”Add to Favorites”;
}
else
if (window.sidebar) 

    document.getElementById(‘link’).innerHTML=”Bookmark Page”;   
}
else
if (window.opera && window.print)

    document.getElementById(‘link’).innerHTML=”Add Bookmark”; 
}

</script>

JavaScript ToolTip

Most of the time we came across using the ToolTips. In .net most of the controls have ToolTip property. However one disadvantage you find in this tooltip is that it won’t persist for a long time. It will appear for a short time when you mouse hover on the particular control. Here we are going to implement a simple JavaScript ToolTip:

Here i am demonstrating a ToolTip for a Label control and a Button control.

Inside the <head> tag add the JavaScript

<script language=”javascript” type=”text/javascript”>
function showToolTip(text) {
var toolTip = document.getElementById(“spnToolTip”);
toolTip.style.top = window.event.clientY + 10;
toolTip.style.left = window.event.clientX;
toolTip.innerHTML = text;
toolTip.style.visibility = “visible”;
toolTip.style.background = ‘lightyellow’;
}

function showToolTipColorBG(text,color) {
var toolTip = document.getElementById(“spnToolTip”);
toolTip.style.top = window.event.clientY + 10;
toolTip.style.left = window.event.clientX;
toolTip.innerHTML = text;
toolTip.style.visibility = “visible”;
toolTip.style.background = color;
}

function hideToolTip() {
document.getElementById(“spnToolTip”).style.visibility = “hidden”;
}
</script>

The first function ‘showToolTip()’ is for the label control. We are passing the text to display in the ToolTip as parameter. In the second function showToolTipColorBG(), we are passing two parameters, first the text for the tool tip and second is color of the tool tip. The second function is for the button control.

Add the below span tag in the HTML:

<span id=”spnToolTip” style=”BORDER-RIGHT: gray 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: gray 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 8pt; Z-INDEX: 111; BACKGROUND:lightyellow; VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: gray 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: gray 1px solid; FONT-FAMILY: Verdana; POSITION: absolute” onmouseout=”hideToolTip()”>
</span>

In the Page_Load write

if (!IsPostBack)
{
lbl.Attributes.Clear();
lbl.Attributes.Add(“onMouseOver”, “showToolTip(‘Label ToolTip’)”);
lbl.Attributes.Add(“onMouseOut”, “hideToolTip(‘this’)”);

btn.Attributes.Clear();

btn.Attributes.Add(“onMouseOver”, “showToolTipColorBG(‘Button ToolTip’,’green’)”);
btn.Attributes.Add(“onMouseOut”, “hideToolTip(‘this’)”);
}

lbl is the Label control and btn is the Button control.

Client Machine Date and Time

Some times we need to find out the client’s machine time or date or both. We may need to display the  date/time in the browser, or need to display the appropriate welcome wish, like “Good Morning” or “Good After Noon” etc.

Getting the Client’s machine date and times is very easy and it all need to write a small JavaScript function.

The following example will display the current date and time in the two lable controls.

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head runat=”server”>
<title>Date and Time on Page Load</title>
<script language=”javascript” type=”text/javascript”>
function DateTime()
{
var date=new Date();
var day=date.getDate();
var month=date.getMonth()+1;
var year=date.getYear();
var seconds=date.getSeconds();
var minutes=date.getMinutes();
var hours=date.getHours();
document.getElementById(‘lblDate’).innerHTML=”Current Date: “+day +”/”+ month+”/”+year;
document.getElementById(‘lblTime’).innerHTML=”Current Time: “+hours+”:”+minutes+”:”+seconds;
}
</script>
</head>
<body onload=”DateTime()”>
<form id=”form1″ runat=”server”>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server” />
<div>
<asp:Label ID=”lblDate” runat=”server”></asp:Label><br />
<asp:Label ID=”lblTime” runat=”server”></asp:Label><br />
</div>
</form>
</body>
</html>