The purpose of web form validation is to ensure that the user is provided with the necessary information and help so that they can fill out and complete an online form with the minimum amount of fuss and time.
Easier said than done!
Validation, for many years has been a major source of debate within professional web design circles, it is such a broad and diverse subject, resulting in far too many varying, and sometimes conflicting, techniques and ideas. Basically, there is no real consistent method to follow for form validation.
With javascript, and especially with jQuerys explosion in popularity, validation has become easier to implement. It has given web developers the scope to create forms that are not only accessible and visually appealing, but also, and most importantly, easy to use and understand.
This post does not list the best jQuery plugins for form validation, which would be the easier web design solution, it offers ten of our favorite tutorials explaining and detailing validation and how to successfully implement it, and in some cases learning how to build your own tailor made plugin.
Form Validation with jQuery from Scratch
In this article you will be shown how to build a simple, yet powerful and extensible jQuery form validation plugin.
This article does not show you how to use the jQuery validate plugin, it covers building a lightweight, flexible solution from scratch. It won't be nearly as advanced and powerful as the official plugin. Nevertheless, you'll learn something new from a jQuery, JavaScript and Object-Oriented aspect.
How to Validate Forms in both sides using PHP and jQuery
You are going to learn how to validate your forms, in this indepth tutorial, using PHP and jQuery in both sides: client side (using javascript with jQuery) and server side (using PHP).
At the end of the tutorial, you will get a final real working example that will validate your fields with / without javascript enabled, amd always making use of server side validaton.
jQuery Contact Form with PHP & jQuery Validation
In this tutorial, you will learn how to create your own jQuery contact form using PHP and JQuery. The tut takes you through the initial basics, creating a single page for your contact form that contains the markup, PHP to process our contact form and then on to the tricky process of jQuery validating.
Adding Form Validation to WordPress Comments using jQuery
When it comes to simpler user experience, having your form validation happen instantly on the same page is a lot cleaner than reloading pages and possibly losing some form content. In this tutorial you'll be shown how to use jQuery to do some instant checking on an example comment form.
Advanced Form Styling & Functionality
This screencast walks you through the code that powers a fairly advanced web form. It utilizes jQuery to hide and show inputs as needed as well as power three plugins. One for applying fancy styling, one for validation, and one for the serializing of the inputs and AJAX submission. You will then use PHP to optionally save the users name and email, as well as send the actual email.
WordPress and jQuery Contact Form without a Plugin
There are lots of WordPress plugins for contact forms, but wouldn’t it be nice to have more control over the markup? In this tutorial, you will be shown how to use a custom page template to create a contact form in WordPress without a plugin, and use conditional statements, for validation, to determine if the form had been submitted or not.
A jQuery inline form validation, because validation is a mess
When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task.
In this tutorial you will be shown how to create a form, and when an error needs to be displayed, the script will create a div and positions it in the top right corner of the input. This way you will not have to worry about your HTML form structure. The rounded corner and shadow in the tutorial hasbeen built with CSS3 and degrades well in non compliant browsers.
Form Validation using jQuery
This article discusses client-side validation using jQuery's validation plugin. That is, you will use JavaScript to validate the fields before submitting the form to the server. This is fast and efficient and provides quick replies to your visitor in the event of any errors. However, it is advisable to also validate the data on the server-side before adding it into the database.
In the tutorial you will create a form that contains four fields: name, e-mail, comment and URL. The first three fields are required, whereas the URL field is optional. And, if you submit the form without filling in the required fields, you will be prompted with an error message.
Using jQuery and Ajax to Validate Forms
This tutorial expects you to have already built your form up to the point where it works, but now needs some validation.
When you finish this tutorial, the username example, you have built, will check with the server whether the chosen name is a) valid and b) available. And the avatar example will try to load the URL in to a hidden image, if it fails, it will show the appropriate message.
jQuery Form Validation JavaScript Tutorial
There are many jQuery plugins available to download that are similiar to what you will build in this tutorial. But if you need more flexibilty with your form or a better understanding of validation this tutorial will help you. So, here is a step-by-step approach to achieving client side JavaScript validation using jQuery.
Web Form Validation: Best Practices and Tutorials
In this article, from Smashing magazine, you will learn to go beyond the validation of a form itself and explore different validation and error feedback techniques, methods and approaches. The article gives you indepth analysis of the pros and cons of server-side and client-side validation, and offers some great advice.
Read the article »
