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.
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.
In this article you will be shown how to build a simple, yet powerful and extensible jQuery form validation plugin.
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.
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.
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.
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.
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.
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.
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.
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 »
You might also like…
25 Graph and Chart Solutions for Web Developers »
20 Professional jQuery Image Gallery Plugins »
20+ Easy to Use jQuery Text Effects and Animations »
25 Useful jQuery Tooltip Plugins and Tutorials »
20 jQuery Plugins and Tutorials to Enhance Forms »
30 Tutorials Combining Both WordPress and jQuery »
25 Fresh and New jQuery Plugins and Tutorials »
50 Useful Tools and Generators for Easy CSS Development »
20+ Resources and Tutorials for Creative Forms using CSS »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »