Shaakunthala's Portal: February 2009

New Google Toolbar - makes it look alike Chrome

I updated my Google Toolbar few minutes ago. Yeah it's really amazing... Google has made Firefox look alike Chrome with the new version of Google Toolbar. The new version (version 5) has not yet released as stable but available as beta [get it right here].

What does look alike Chrome? Actually it is the New Tab Page. Install the latest beta build of Google Toolbar and open a new tab.

It looks like Google is going to integrate some of Chrome's features into Firefox. But why? This may keep Firefox users attached to Firefox forever, and may not tend to migrate to Chrome. What I feel is Google's ultimate target is not to market Chrome, but to market their profitable main products which are the Google search engine, Gmail and etc. Chrome is also made for achieving that ultimate goal of promoting their profitable products.

This new look ain't gonna be a good news for people who visit bad sites when the parents are out, is it? Anyway, I love this new style. :)

---
Earlier days, I wrote 'Google Chrome Sucks!'. But now slowly I'm becoming a Chrome lover.. You know.. things change.. especially people... that's what Lord Buddha have said... :)

Form Validation with Javascript

Well, I thought about writing something related to stuff that I'm currently working on. First of all,.. I must say... It's not a big deal. What? Form validation with Javascript.

First, we'll create our HTML form. Suppose it is a login form. Users may have to enter username and password to login to your site. Here is the HTML form and source code.

Code:

<form method="post" name="frmLogin" id="loginform" action="login.php" onsubmit="javascript:return validateForm();">
<table border="0">
<tr>
<td>Username: </td><td><input type="text" name="txtuser" id="user" /></td><td><span style="color:#FF0000" id="user_msg"></span></td>
</tr>
<tr>
<td>Password: </td><td><input type="password" name="txtPwd" id="pass" /></td><td><span style="color:#FF0000" id="pass_msg"></span></td>
</tr>
<tr>
<td></td><td><input type="submit" name="btnGo" id="sub" /></td><td></td>
</tr>
</table>
</form>

Next thing is to write our Javacsript code. In the first line of the above code, the value of the onsubmit attribute is "javascript:return validateForm();". So, validateForm() is the function which we have to write code for.

Write the following code inside the head tags of your HTML code.

<script type="text/javascript" language="javascript">
// <!--
function validateForm(){
    var username=document.getElementById("user").value;
    var password=document.getElementById("pass").value;
    var ret=true;
    if(password.length==0){
        ret=false;
        document.getElementById("pass_msg").innerHTML="Invalid password";
        document.getElementById("pass").focus();
    }else{
        document.getElementById("pass_msg").innerHTML="";
    }
    if(username.length<4 || username.length>15){
        ret=false;
        document.getElementById("user_msg").innerHTML="Invalid username";
        document.getElementById("user").focus();
    }else{
        document.getElementById("user_msg").innerHTML="";
    }
    if(ret==false){
        return ret;
    }
}
// -->
</script>

OK, now here is what the code does. If user forgets to enter the username/ password, it shows error message(s) in red and focuses on the relevent text box so user does not have to click on it before correcting the error.

In my javascript code you can see that I'm checking the form from the bottom to top. That is because I'm moving the focus to the relevent text box. Suppose the user forgets to enter both username and password. The focus should move to the username box. But, if I check the code from the top to bottom, the focus will move to the password box. That is the opposite of what we want to see. So, to get the thing done correctly, the form should be checked from the bottom to top.

This form can be further improved to check the form using AJAX, like what we see in ImageShack.

I need a website

Yeah, the exam is over... Big thanks to ppl who facilitated and helped.... Now it's gonna be vaccation... up to Adam's Peak...

Few more words about the exam... I dropped sociology for this time.. don't ask why -- parroting sucks! gonna do it next exam season... Today I did the marketing paper somewhat well... hope the entire exam is OK :-S (Exam rocks when it's Software Engineering/ Development paper -- a different story)

Anyway... during this vaccation... I'm planning to build my personal web site... which I think may support my professional carrier...

First thing is the design (not appearance) stuff... team leader is me, team members are me, client is me, and also the supervisor is gonna be myself. I like to begin all from begining, coz I learn and experience.. but.. since it's a timewasting task to 're-invent the wheel', I decided to use an existing template. Anyway... currently I'm planning it's skeliton... software design stuff.

Then.. the next problem -- where do I host it? I'm still in the bigining.. so there's no need to spend money a second level domain name... I'm looking for a lower level doamin name at no cost. Currently I have chosen one at com.on.lk. But it may subject to change according to my requirements. Currently, there I have put my tech blog inside a HTML frame. Take a look if you are interested in. If you have a better recommendation (such as one offering more than 250 MB) please leave a comment. (I know that 250 is enough for a beginner :D )

So, what's gonna be the content? It's all gonna be tech tech tech! I have enough contributed to spread junk (like this blog) to the rest of the World.. so.. my site -- gonna be no junk. :)

OK,... that's it.. now back to work :-|

Shaakunthala's Portal

New Google Toolbar - makes it look alike Chrome

Form Validation with Javascript

I need a website

Followers

Subscription Options

Older Posts

Other Blogs by the Author

The Author

Username:
Password: