enavu webdevmania tutsvalley psdestination
visit the enavu network
2 Comments Article Title Overlay

Web Forms: Validation [part 3]

This article goes over the common validation practices both in the back-end and front-end of our Web Sites.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

This article goes over the common validation practices both in the back-end and front-end of our Web Sites.

Introduction

Validation in Forms is used for a few reasons from which the most important one is so you do not intake false data from your Web Forms. For example if someone tries to enter letters for their phone number and you try to call that number you most likely won’t have any luck getting a hold of them. Also it allows you to intake data in a uniform way, hence being able to sort it, display it, re-arrange it with easy. Validation has recently expanded to fit a new realm of possibilities like instantly checking if a Credit Card is valid, or if the username you want hasn’t already been taken!

Validation splits into two parts, Front-End and Back-End. The front-end part of things is sort of optional, it just makes thing easier. Using front-end validation will not require for the page to reload for you to get alerts/errors from things you may be mistyping. The Back-End validation is where we use programming and all kinds of DB checks to make sure your input doesn’t conflict with the Database or just with type of information you are trying to enter. We sometimes use the Back-End validation to check for SQL injections which use our forms to gain access of our Websites.

Front-End Validation

Front-End validation is usually done with JavaScript. As of late, HTML5 has added the ability to validate fields by using the field type attribute and a new attribute called required. Unfortunately this is not supported by a plethora of browsers so you need additional plugins to help you use it like the jQuery Tools form plugin. If you don’t want to use technology not widely used by the masses then you can use the jQuery Validation Plugin which will help you validate with the use of some classes, and any custom jquery you want to add yourself.

If you are using .NET and Visual Studio there are some built in controls that will handle the validation for you. They generate the JavaScript validation for you, and you can specify Regex equations for it to validate things like emails and so on.

When you are creating validation you will need to know how to use Regex and use the internet to find what you are looking for, here is what regex for your email validation looks like.

^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$

Personally even though i have taken courses in programming which went over the concept of Regular Expressions i still don’t know much and cannot write my own. Don’t be afraid to go to google and type in “regex email” and find what you need.

And finally here is what front-end validation can look like:

Back-End Validation

Back-end validation is the MOST important type of validation! You ask why? Well it’s simple, front-end validation any person that knows a little about the web can disable it and submit anything they want… but back-end validation runs through the server and your validation functions which they cannot surpass.

With back-end validation it is a good practice to return any errors that may arise from the submit and display them to the user so they can fix them, here is an example:

There are countless libraries to help you with back-end validation for every single language, so choose your poison and go to our best friends google/bing to get your fix.

Conclusion

If you are serious about creating websites, and being responsible for the information you gather, you need to consider validation. At the very least you need to ensure back-end validation, and prevent things like SQL injection which is a way for hackers to enter code into your forms and run things through your database either gaining access to you database for malicious reasons, or to post spam on your website. At any rate please look into possible solutions, hopefully the ones I have outlined will help you get started on your way to good validation!

Related posts:

  1. Web Forms: Semantic Mark Up in our Forms [part 2]
  2. 10 Amazing jQuery Plugins To Improve Your Forms
  3. Web Forms: Types of User Assistance [part 1]
  4. Use HTML5 Placeholder Input Attribute Today using jQuery!
  5. The 6 don’ts of Web Development

Did you absolutely LOVE this article... share it!

Comments

  • First off: Thanx for sharing. Second: I believe the best way of validating a form is made in two steps: 1. Direct client-side validation of the user’s input so the user can directly see what’s wrong and don’t have to wait for a page reload. Best practise is some jquery or prototype plugin.
    2. A server-side validation to lock of searchengine bots from dumping your database full with empty requests. That’s how I always do it and it is working fine for me.

  • Yeah that’s exactly the process i tried to outline above :)

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting