Simple JavaScript Form Validation

A simple JavaScript form validation script

I have written a simple JavaScript form validation code, which is easy to understand and implement. Please note that this code is written for absolute beginners with little to no programming knowledge, if you are already an expert user you can skip this post or provide your valuable input which will be highly appreciated.

Before jumping head first to the code let us understand a little bit about data validation.

Data Validation in a nutshell:

Data validation means checking the correctness or accuracy of the data before entering the same in the database thereby rejecting incorrect or bad data.

There are basically two types of data validation, one is the client side (browser) and the second type is the server side validation which happens at a server level. JavaScript is commonly used for client side data validation and languages such as PHP can be used for server side validation. Data Validation if done correctly can prevent spamming to a larger extent.

Importance of Client Side data validation:

Consider a situation where we rely only on server side validation, after the user had entered all necessary data and then pressed the Submit button. If some of the data that had been entered by the user had been in the wrong form or was simply missing, the server would have to send all the data back to the user and request that the form be resubmitted with correct information. This is an extremely lengthy process which also puts unnecessary burden on the server and might also irritate your user.

This is where client side validation comes into picture, here the validation is done at your user’s browser and the form is submitted only once data is validated. For better accuracy we can add data validation at the server end too, just in case if the client side validation is bypassed the data will still be validated at the server thereby rejecting the bad data.

Always make sure to have client side as well as server side data validation as client side validation can be bypassed easily.

Now as you have a little bit understanding of Client Side and Server Side data validation, let us have a look at the code.

Below is the simple HTML contact form that we will be validating, this is how it should look. Once our HTML form is ready we will then add our Simple JavaScript form validation code in our “script.js” page.

Simple JavaScript Form Validation

All we did here is created a simple HTML form, added “script.js” file under the <script></script> tag. “script.js” is the file where we will be writing our JavaScript code. Here an “onclick” JavaScript event will be triggered once you click on the submit button which will validate our form before submitting.

Simple JavaScript Form Validation

The above JavaScript code is used to validate our HTML form. All we did here was tried to check if a particular field is empty and if it is not empty then check if the provided data is valid or not.

You can have a look at the demo here

You can download the code from here 

P.S : Make sure to perform your data validation server-side as well. You can never trust client-side validation, which can be bypassed more easily. Use Client-side validation in the sense of providing a better User Experience (UX), so the user doesn’t have to submit and reload a page because of some invalid values.

Get Free Online Courses From Top Universities

Enroll For Free Online Courses With Top Universities

MOOC stands for Massive Open Online Courses is taking the world of E-Learning by storm. MOOC’s are free online courses which are provided by some elite universities like Stanford, MIT, Harvard, UC Berkely to name a few.

MOOC’s provide high quality educational content for students all over the globe. The best part of MOOC is to let students learn at their own pace. And unlike traditional courses here you can revisit the course contents as many time as you want. You can also download videos, PDF, slideshows etc, from their website and can study offline too.

All you need is passion for learning and a computer with decent internet connection.

These free online courses offers subjects ranging from Engineering, Mathematics, Programming, Psychology the list is endless. The teachers teaching these free online courses are some of the best authors and pioneers in their respective fields.

You have to spend an average of 4-5 hours per week learning the contents depending on the course you have enrolled, which you can learn as per your convenience. Forums are a great way for students from different parts of the world to ask questions and learn through collaboration.

There are some interactive assignments and quizzes which makes learning fun and it also helps you to keep track of your progress. You also get a course completion certificate for some courses which you can also add to your resume or Linkedin profile.

You can simply drop out of a course if anytime you feel like you are getting bored and jump to another course without getting penalized.

Below is the list of websites which provides such free online courses.

1. Coursera

free online courses from coursera

Coursera is one of the best MOOC platform which provides free online courses. It lets you choose from 300+ courses in over 20 categories created by 62 Universities from 16 countries. There are wide array of courses ranging from Arts, Science, Mathematics, Medicine and Artificial Intelligence.

 

2.  edX

free onlien courses from edX

edX offers free online courses from best professors and universities. Their forums is more like a social learning tool which you use to connect to thousands of like minded students from around the globe. They offer subjects ranging from law, history, science, engineering, business, social sciences, computer science, public health, and artificial intelligence (AI).

 

3. Udemy

free online courses from udemy

Udemy offers free online courses along with paid courses. Learn everything from programming to photography to design to yoga and more.

 

4. Udacity

free online courses from udacity

Udacity caters wider audience by providing free online courses for high school, college students and professionals as well. Get a course completion certificate after you successfully finish a course (for selected courses only).  

 

5. MIT OPEN COURSEWARE

Free online courses MIT

MIT OPEN COURSEWARE is a web-based publication of virtually all MIT course content, which is accessible to everyone for free. This site contains 2000+ free online courses ranging from business, fine arts, engineering and medicine.

 

6. HARVARD EXTENSION SCHOOL

free online courses harvard

HARVARD EXTENSION SCHOOL provides 200+ courses including college lectures. They also have an extensive list of language courses ranging from Japanese, Italian, Latin, Greek, German etc .These courses are free and available for everyone.

 

7. Carnegie Mellon University

free online courses carnegie mellon

Carnegie Mellon University Open Learning Initiative is helping masses by bridging the gap between educators and students. Apart from high quality text and video contents, they also provide students with practice activities, self-assessments, and graded assessments. Students can also track their progress from an interactive learning dashboard. 

 

8. University of California Berkeley

free online courses berkeley

University of California Berkeley records tons of courses every semester and provides them for free to the students. They record courses in audio and video formats and make it available through UC Berkeley’s YouTube and iTunes-U distribution channels. 

 

9. Open Yale Courses

free-online-courses-from-yaleOpen Yale Courses provides free online courses ranging from molecular biology to astronomy. You can start taking the course without any need for registration. No certificate is currently available through the Open Yale Courses website.

 

Hope you liked this post, and benefit from it!

 

Tools To Optimize Your Images Online

A List Of Best Online Image Optimizer

High quality images used on websites which are not optimized can take a lot of time for a simple page to load and can consume a lot of bandwidth. Unless all your users are using high speed internet, it is very important for you to optimize every possible image on your website. Let me explain you why optimizing images on your websites is important.

Let us assume you are running an online store where the size of home page of your website is 1 MB out of which 500 KB is the total size of all the images on that page. Let’s say you get 100 visitors on your website every day which means that you are spending close to 50 MB of server bandwidth only on images. This is where image optimization comes into picture. Image optimization helps you to reduce the size of the image without messing with the quality.

Optimizing images can save you on your server bandwidth and space, it will also make your website load faster and provide better user experience. Hence it is extremely important for you to keep your image size as low as possible.

Whenever possible make sure that the size of an image on your website should always be under 100 KB or less.

Let’s try to see the difference between an optimized and an normal image.

white-tiger-cub

 

white-tiger-cub-minified

Here the first image is a normal image and the second image is an optimized version of first image. The size of the first image is 156 KB whereas the size of the second image is 110 KB, so the total saving is of 46 KB and there is almost no visible change in the quality of the image.

I have compiled a list of best free online image optimizer for your website, which are extremely fast and user friendly. People who don’t know Photoshop can still use these online image optimizer for their website.

Before you start using these online image optimizer tools for your website I would suggest you to check your site load time, you can check it on Pingdom. You can then compare the results after image optimization.

To optimize your images online, you can use any of the below tools

 1. JPEGMINI

online-image-optimizer-jpegmini

JPEGMINI is one of the best online image optimizer which works like a charm for JPEG format images. It can reduces the size of your photo’s by up to 5x without messing with the quality of the image. The only problem with this site is, you can’t upload more than one image at a time as a free user.

 

2. Kraken

kraken

Kraken is a web based image optimizer, which supports multiple image formats for optimization. It has a very clean and easy to use interface.

 

3. PunyPNG 

online-image-optimizer-Puny-PNG

PUNYPNG is an online image optimizer which can optimize multiple image formats like PNG, JPEG and GIF. The best part of this website is that you can upload multiple images. (The size of your individual image file needs to below 150 KB and you can upload only up to 15 files ) and once the images are optimized you can download all the new files easily in a zip format without any need for registration.

 

4. Smush.it

Yahoo-Smush.it

Smush.it is an online image optimizer tool powered by Yahoo Developer Network. It supports multiple image formats. Has a very clean user interface, which provides you with the details of the optimization in a tabular format with the information like no. of KB’s saved and its percentage.

According to their website they use the following algorithm’s for image optimization.

  1. ImageMagick: to identify the image type and to convert GIF files to PNG files.
  2. pngcrush: to strip unneeded chunks from PNGs. We are also experimenting with other PNG reduction tools such as pngoutoptipngpngrewrite. Hopefully these tools will provide improved optimization of PNG files.
  3. jpegtran: to strip all metadata from JPEGs (currently disabled) and try progressive JPEGs.
  4. gifsicle: to optimize GIF animations by stripping repeating pixels in different frames. 

More detailed information about the same can be found here : FAQ Smush.it

 

5. TinyPNG

tiny-png

TinyPNG is an online image optimizer dedicated only for PNG files. You can upload up to 20 images at one go, but the total size all the uploaded images needs to be below 3 MB.

 Hope you liked this post and benefit from it..cheers!