Code Samurai

Showing posts with label JavaScript. Show all posts

Saturday, January 15, 2011

Validate number input with Regular Expression in JavaScript

Validating inputs submitted by users is always a big challenge for writing any application that requires users input. For example, if we have a mortgage calculator app, we must validate and make sure that users don't enter a letter for the interest rate box.

For the mortgage calculator, it is easy to validate input that we don't need regular expression. But a lot of problems require complex validation if we don't know regular expression. For example, validate the zip code input which must be five digit long such as 22003 and 97850.

In this post, we'll learn how to do such validation with JavaScript. However, the regular expression pattern can be applied for other languages as well.

Let's take a look at this JavaScript code:

function validateZipCode(zipCode)
{
  var pattern = /^\d{5}$/;
  return zipCode.search(pattern);
}

This code will return 0 if the input contains only a string of five digits. Otherwise, it will return -1. Pretty neat right? Let's break down the pattern.

/ marks the start of the pattern
^ specifies that the pattern must start at the beginning of the input string
\d{5} means pattern of five consecutive digits in the string. For example, 9780 is a match but 98t034 is not. We can change the number inside { } to match more digits. For example, \d{6} matches six consecutive digits.
$ specifies that the end of the pattern must also be the end of the input string. ^ and $ combines to make sure that the input contains only five digits and nothing else. For example, t97850 matches the \d{5} and \d{5}$ pattern but doesn't match ^\d{5}$ and 97850f matches \d{5} and ^\d{5} but doesn't match ^\d{5}$. Only 97850 matches ^\d{5}$ pattern.
/ marks the end of the pattern. Notice that a pattern must be enclosed within a pair of / / signs.

Saturday, December 18, 2010

Make JavaScript-heavy webpage load faster

It is cleaner to put all your JavaScript files or scripts inside the "<header>" tag. However, browsers must interpret these scripts completely before going on to render the page content. And during interpretation, nothing is shown on the web page, offering no response to users' screen and making the website seem slow to load.

Remember that most people will leave your page if it takes more than 5 seconds to show anything. Thus, include scripts in the body immediately before you need to use them. The browser will render whichever content available first and show it to users. It only have to interpret the scripts when it needs to. This will offer great feedback to users, letting them know your page is loading and making your page seems to load faster than it actually is! Here is a example of this technique:

<html>
  <head>
   //we need this first so interpret this here <script type="text/javascript" src="xxx.js" />
  </head>
  <body>
   //Page content goes here
   //we need this later so interpret it later <script type="text/javascript" src="aaa.js" />
  </body>
</html>

Warning: this doesn't mean that you can spread your scripts all over the page. Always try to externalize your scripts as much as possible and include the external files when you need them. Obey Object-Oriented Design :)
As always, if you have any question please feel free to post in the comment section below.

Thursday, December 16, 2010

Display tags as literal strings in JavaScript

When using JavaScript statements such as document.write("<table>") to display HTML tags as literal strings, browsers will mistake that we want to insert the tags into the page structure instead of displaying them as text. For example:

The above script won't work. The screen will show nothing because the browser interprets the string as HTML table tags. To work around this, split the string that contains tags to be displayed into parts:

Happy coding and don't forget to comment :)

Search This Blog