Categories
01 November
2010
CSS jQuery Tutorials
3182 Views

HowTo: Quick form validation with jQuery

Have you ever thought of a better way to validate each input field of a long form without a sequence validation? Well, I was forced to have my way around it and I will be sharing a simple method using jQuery.

The truth about form is that:

  • you are not sure if your users will enter the appropriate details you are requesting for;
  • so you need to validate the user’s entry before submitting it to the server.

But, remember that javascript validation should not be the only medium for your validation; it’s useful when you don’t want your user to revisit the form page for some minor error correction. So, I will suggest taking it as a good practice to validate on the client-side before submitting to the server.

It’s so funny sometimes when people omit or enter invalid information whilst filling a form;  “you need to correct the old man, he’s probably losing his sight” – *whispering.

So, let’s get the party coding started …

  Working Demo

If you have a form like the one above, validating each input sequentially can be so tedious. Below is a good example of sequence validation.

I don’t wanna bother about the old method explanation, we are not here to learn about it anyway. Let’s proceed to the use of jQuery for our form validation.

If you are paying good attention, each required field in the form has a class named ‘required‘. This will be use by jQuery whilst validating. The process is easy; instead of doing a sequential validation, we will be using the jQuery .each() method to iterate/loop through each DOM element of the form. Any element that has a class ‘required‘ will go through the validation process; any element that has the class ‘email‘ will go through the email verification process. This example works for empty inputs and email validation respectively; you can create your validation process for other request like valid phone number, valid credit card number and so on.

The script below does the validation:

Firstly, let’s include jQuery on the page:

Then the code:

What the script does was:

  • iterate through the elements of the form;
  • check if the element has the required class;
  • then perform validation on the element if the class match the request.

It as simple as that! If the validation goes through, the form will return true by submitting to the server. Click the demo button to see a working example.

  Working Demo

You can view the page source to see the complete formatted code.

If you find this helpful, please let me know by leaving a comment.

Thanks for reading.

Related Posts:




One thought on “HowTo: Quick form validation with jQuery

  1. segebee says:

    Awesome! thanks man!

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Comments

Julianich
2016-01-12 17:02:25
i guess you should install KrojamSoft FilesSearch and see if it can help...
godson
2014-10-21 15:25:24
this lesson is wonderful...
vijayan
2014-01-29 12:52:07
the below command worked for me attrib -s -h *.* /S /D thanks a lot...

Popular Posts

Useful Tools For Your Tweets
19 September 2010
CSS, jQuery, Tutorials
Useful Tools For Your Tweets
Twitter is growing really fast and attention is getting shifted to tweets every minute. The common phrase I see on most Facebook status update is 'Follow me @blablabla'. The truth is, am not a twitter freak but I found twitter really useful, I mean so useful. I read peoples' tweet everyday and I found it informative and entertaining; so the need to get real-time update arose in me and I decide to find useful tools that can help me stay up-to-tweet.
HowTo: Enable “Administrator” account on Windows 7
11 January 2011
CSS, jQuery, Tutorials
HowTo: Enable “Administrator” account on Windows 7
To enable "Administrator" account on windows: Open command prompt(START MENU -> RUN. Type CMD and press enter) and type in this command: net user administrator /active:yes To disable: net user administrator /active:no" >RUN. Type CMD and press enter) and type in this command: net user administrator /active:yes To disable: net user administrator /active:no" >To enable "Administrator" account on windows: Open command prompt(START MENU -> RUN. Type CMD and press enter) and type in this command: net user administrator /active:yes To disable: net user administrator /active:no
HowTo: Restore Files Hidden by Virus on Windows 7
09 January 2011
CSS, jQuery, Tutorials
HowTo: Restore Files Hidden by Virus on Windows 7
I recently had a challenge of recovering lots of folders hidden by a virus on a drive. Some virus always hide files and folders in an external drive and create a new folder with an extension like .exe, .lnk and so on just to fake users to a malicious act. The truth is, most anti-virus will detect this virus and remove it, but it doesn't return or restore the files and folders hidden by the virus. This is the 'headache spot'!

ADS