Making Form Validation Easier Than Ever Before

Tags:

Forms

Jquery

So before you start--Yes, I know this is a CSS Blog and that it\\\'s on this website, CSS Checkbox. However, if you\\\'re one to peruse CSS Checkbox and it\\\'s myriad of awesome CSS Checkbox, CSS Radio Button and CSS Text Input styles designs, you probably are no stranger to creating HTML forms for your users to fill out their information with. And...well if you\\\'ve created HTML forms you know that validation is an annoying but necessary evil. Having users submit bogus data is a total pain and it\\\'s easy to miss something if you\\\'re writing your own validation rules. While it\\\'s always a good idea to validate form data on both the client-side and the server-side, there\\\'s a plugin I\\\'ve been using frequently over the past few years that can help you with client-side validation, and which needs some serious love if you ask me. Basically what I\\\'m talking about is the jQuery Validation Plugin, a simple jQuery plugin that you can include with your web project in order to make client-side validation a breeze. The jQuery Validation Plugin has a variety of awesome features. Firstly, it allows you to specify any specific or all fields in your form as required fields, and allows you to set a specific error message for each field. You can also validate all sorts of form elements without issue--everything from Text Inputs, to Select boxes to AHEM...Checkboxes! Whoohoo! Aside from checking if a particular field / form element is empty or not, you can validate the user\\\'s input to see if it is a number, if has a minimum number of characters, if it\\\'s a valid email address, if it\\\'s a valid credit card number which is really great, and many more. You can also very easily impose AJAX callback functions to say, check on the client-side if an email address has already been entered into your database. You can impose validation rules on fields based on previously entered input in other fields (for example, check that a checkbox has been checked before requiring another field be filled out). Even thought the plugin is driven by the powerful and versatile jQuery, you can still easily customize the look and feel of UI features it creates since those elements are pure HTML and CSS. It\\\'s very very easy to write your own custom CSS to style the error messages that are created by the jQuery Validation Plugin. Check out the jQuery Validation Plugin website for free downloads and documentation. If you\\\'re creating web forms in any capacity, this is a MUST HAVE plugin. Cheers! This blog post way brought to you by CSS Checkbox, a free resource for CSS Form Elements run by one dude out of his living room.