Javascript Password Validation

April 19th, 2009 by Ian O'Donnell

Nothing is worse than spending forever googling for how to accomplish a certain task only to find pages that don’t answer your question. So just to clarify, here is what we will be covering.

  • Checking Password Length
  • Matching 2 password fields
  • Giving the error to the user without reloading the page

And this is an Example too.

In the current state of web design it is extremely desireable to give errors to the user without reloading pages, especially when it comes to forms. This makes the experience smoother for the user which is what we should be aiming for.

First things first let’s just clarify the html page and css so we know all our field names etc. Here is the code I am using for this example:

?Download html.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<head>
 
    <title>Validating Password</title>
 
    <link rel="stylesheet" href="styles.css" type="text/css" />
    <script type="text/javascript">
 
    </script>
 
</head>
<body>
 
     <form>
          Password: <input type="password" id="pass1" value="" maxlength="20" onkeyup="chkpassword()" />
          <br />
          Enter Password again: <input type="password" id="pass2" value="" maxlength="20" onkeyup="chkpassword()" />
     </form>
 
     <div id="passwordAlert" ></div>
 
</body>

Ok so the html isn’t the most elegant etc :) But this will serve perfect for our example don’t worry about it :P

The script tags in the head element is where we will put our Javascript. This could of course be place in an external file but for testing it out it is quite often easier to leave it in the Read the rest of this entry »

, , , , , , , , , , , , , , , , , , , , , ,

Javascript: Change text colour dynamically

November 24th, 2008 by admin

In the wake of my previous post “Javascript: Changing background colour dynamically“, I am going to put together a similarly styled post with the same method of control. Our aim is to allow users to be able to change the colour of the text on the page by clicking an image or a link. Just the same way we allowed them to change the background colour, An example of which can be found here or in the previous post itself.

As we are doing this in Javascript, the first thing we have to do is import our Javascript file again in the header, so we can add our functionality. As we already covered this in the previous post I will just give you the code here to copy and paste or to download as a text file.

?Download headerCode.txt
1
2
3
4
5
6
7

<head>
 
    <title>Changing Text Colour</title>
 
    <script style="text/javascript" type="text/javascript" src="javascript.js">
 
</script></head>

In the example above, our page is called “Changing Colour”, our Javascript file is called “javascript.js and is stored in the same folder as our page. Also, we don’t have a css file but that’s not important for this example.

Ok once again we will work on our Javascript file first. Create a new file called “javascript.js” and Read the rest of this entry »

, , , , , , , , , , , , , , , , , , , , , , , ,

Javascript: Changing background colour dynamically

November 21st, 2008 by Ian O'Donnell

During the completion of a recent project I was working on I had to learn something I didn’t do before, this was allowing the user to change the colour of a html web page on the fly without reloading. It was actually quite tough to find the information I needed based on the method I wanted to use so I thought I would share the information here and give you an example of it too.

This works across all browsers but I am by no means saying this is the only or best or easiest way but it works and works well.

Ok first in our <head></head> tag we’re just going to load our javascript file, easy if you have done it before, if not, it is quite similar to loading an external css file. So the code in our <head></head> tag is as follows:

?Download headerCode.txt
1
2
3
4
5
6
7

<head>
 
    <title>Changing Colour</title>
 
    <script style="text/javascript" type="text/javascript" src="javascript.js">
 
</script></head>

In the example above, our page is called “Changing Colour”, our Javascript file is called “javascript.js and is stored in the same folder as our page. Also, we don’t have a css file but that’s not important for this example.

Ok so before we start on the page itself let’s just sort our Javascript file, create a new file called “javascript.js” and Read the rest of this entry »

, , , , , , , , , , , , , , , , ,

Make your link creation easier and faster.

September 29th, 2008 by Ian O'Donnell

Ok this tip first of can be used for any forum, platform or service which requires a specific format of link. for example forums usually want something like [link=http://www.ianodonnell.com]Home Page[/link] which can be annoying as it takes time compared to just a simple copy paste.

I will use the Microblogging service Jaiku as an example here for this one but as I said it can be used for any service and is very easy to modify, I achieved this through Firefox and an addon called Make Link. you should go get it immediately. Install it from the link provided and once you have, restart Firefox and we are ready to finish up.

In your addon list (*Tools -> Addons) click options on the Make Link addon and click “new”. The format we need for a Jaiku link is [link text](url), so, Put in anything Read the rest of this entry »

, , , , , , , , , , , , , , ,

Micro-Blogging: Time-saving tip.

September 28th, 2008 by Ian O'Donnell

I have no idea how many of you do or do-not use Micro-Blogging or Social Networking tools such as Twitter, Jaiku and Facebook to begin with but that is another story for another day. This tip is something I have been trying to do for a long time (Read: Thinking about doing) and this evening I finally put finger to key and got it sorted and was pleasantly surprised at how simple it was.

Ok back to my main point, anyone who is a big micro-blogger and many others besides I am sure, have used tinyURL or a similar service to shorten an ugly URL into a publicly presentable one e.g. the search results for “just an example please”:

http://www.google.ie/search?q=just+an+example+please&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-GB:official&client=firefox-a

and after being Read the rest of this entry »

, , , , , , , , , , , , , , , , , , , , , , , ,

Creating a Gameplay video: Simple and easy Method

August 6th, 2008 by admin

As a pre-emptive to a detailed blog post I have planned regarding producing high quality videos for
Youtube from any pc-game, although I will be focusing on Battlefield 2142, I am going to produce a
simple guide that is especially useful for people who may not have done this before or may not have
experience editing. the quality of the output at the end will not be that of the videos here that I
have made recently but as I said, it is mainly for beginners and will provide an excellent start
point.
What we will need for this method which will be the ‘Killcam’ method is xfire ……. and Windows
Movie maker. That is it!

For this example I kept everything simple, I will break it down step by step and provide examples and
recommended viewing where necessary, the video I made for this tutorial of sorts is as simplistic as
it gets, a short video of the Read the rest of this entry »

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Battlefield 2142: Clan Training Video

July 16th, 2008 by admin

Ok, so in order to keep on top of any editing experience I have I decided it would be a good idea just to get some practice in so this is a video I edited from a Battlefield 2142 Battle recorder recording (mouthful) of my clans training session. Basically we close the server to the public for a few hours and each week two leaders from the clan are chosen and we are divided into teams and so on, I won’t bore you with the details, not yet at least.

Here is how it turned out.

**NOTE** Because I optimized the video for the tube as best I could (resolution slightly off) if you click on the video there to go to the actual Youtube page it is on you can watch it in a higher quality version :) It just does not work for embedding :(

With many issues left unresolved eg the audio/video are slightly out of sync after the render and also some parts of the video itself which i feel should be changed, It was a worthwhile experience. Tonight is our weekly training session so I should get to work on another video.

, , , , , , , , , , , , , ,

Licka’ Paint

May 11th, 2008 by admin

Inspired by recieving a comment on my old placeholder post I spent a lot of this evening sprucing up the ole homestead. You can expect more content here later. Still trying to get my Blogger-Legs :)

It is quite a bit different from the blinding white of before but let’s leave the css for another post. First thing I met on my return was a message kindly informing me my Wordpress needed to be updated. You see I was running 2.3 and since I was last around 2.5 was let loose on the world so this meant a bit of work.

Rooting around with an ftp client (FileZilla being the one I use at the moment), isn’t exactly fun and when it comes to comething like WordPress I’d rather search an alternative so that for now and in the future I wouldn’t have to take the ftp route, and this alternative I found in the form of the WordPress Automatic Update(WAUP) plugin. This plugin is as easy to install and activate as any other and once installed gives you the handy option in ‘Manage’ to update your blog. Once you run it you only need to click Yes and Ok a few times and you are done. The process de-activates your plugins and backs everything up for you. While it is supposed to re-activate them again once everything is done, It did not on this occassion, this is only a minor hitch in my eyes however.

Once we were updated and did not need to see the ‘OMG UPDATE!’ message it was time to move onto the fun stuff. The looks…

I will start Blogging!

March 31st, 2008 by admin

If I don’t put somehing up soon, I know full well that this here establishment will fall into disrepair and the tumbleweed will move in.

So here it is, My placeholder post to make sure I get started as soon as I get some time. That is all…

,

RSS Feed