{"authorId":"1","title":"jQuery Simple Validation Plugin","slug":"jquery-simple-validation-plugin","postDate":1279674046,"expiryDate":null,"enabled":"1","fields":{"2":"<p>I find that I end up consistently adding form validation to sites, and for some reason, I never made a plugin out of it. I feel like every jQuery validation plugin that I look at is way too bloated for what I really need, so I finally whipped up a simple validation plugin that comes in at about 1.5kb.<\/p>\n<p>I tried to keep it really simple with this plugin: just check to see if a field that has been marked as required is not empty and check to see if an email address is valid.<\/p>\n<p>If you want to skip ahead, <a href=\"http:\/\/trevordavis.net\/play\/jQuery-Simple-Validate\/\">Check out the demo<\/a> and <a href=\"http:\/\/github.com\/davist11\/jQuery-Simple-Validate\">download the plugin from GitHub<\/a>.<\/p>\n\n<h2>Start with the Markup<\/h2>\n<p>To get started, I would always start with a simple form marked up in an ordered list:<\/p>\n\n<pre><code>&lt;form action=\"thanks.htm\" method=\"post\">\n\t&lt;ol class=\"forms\">\n\t\t&lt;li>\n\t\t\t&lt;label for=\"name\">&lt;em class=\"required\">*&lt;\/em> Name&lt;\/label>\n\t\t\t&lt;input type=\"text\" name=\"name\" id=\"name\" \/>\n\t\t&lt;\/li>\n\t\t&lt;li>\n\t\t\t&lt;label for=\"email\">&lt;em class=\"required\">*&lt;\/em> Email&lt;\/label>\n\t\t\t&lt;input type=\"text\" name=\"email\" id=\"email\" \/>\n\t\t&lt;\/li>\n\t\t&lt;li>\n\t\t\t&lt;label for=\"website\">Website&lt;\/label>\n\t\t\t&lt;input type=\"text\" name=\"website\" id=\"website\" \/>\n\t\t&lt;\/li>\n\t\t&lt;li>\n\t\t\t&lt;label for=\"comment\">&lt;em class=\"required\">*&lt;\/em> Comment&lt;\/label>\n\t\t\t&lt;textarea name=\"comment\" id=\"comment\">&lt;\/textarea>\n\t\t&lt;\/li>\n\t\t&lt;li class=\"buttons\">&lt;button type=\"submit\">Submit&lt;\/button>&lt;\/li>\n\t&lt;\/ol>\n&lt;\/form><\/code><\/pre>\n\n<p>Then, I need some way to denote which fields should be validated. The HTML5 required attribute, just isn&rsquo;t supported well enough to use, so all that is needed is to add the class of <strong>required<\/strong> to each field that needs to be validated.<\/p>\n\n<pre><code>&lt;form action=\"thanks.htm\" method=\"post\">\n\t&lt;ol class=\"forms\">\n\t\t&lt;li>\n\t\t\t&lt;label for=\"name\">&lt;em class=\"required\">*&lt;\/em> Name&lt;\/label>\n\t\t\t&lt;input type=\"text\" name=\"name\" id=\"name\" <strong>class=\"required\"<\/strong> \/>\n\t\t&lt;\/li>\n\t\t&lt;li>\n\t\t\t&lt;label for=\"email\">&lt;em class=\"required\">*&lt;\/em> Email&lt;\/label>\n\t\t\t&lt;input type=\"text\" name=\"email\" id=\"email\" <strong>class=\"required\"<\/strong> \/>\n\t\t&lt;\/li>\n\t\t&lt;li>\n\t\t\t&lt;label for=\"website\">Website&lt;\/label>\n\t\t\t&lt;input type=\"text\" name=\"website\" id=\"website\" \/>\n\t\t&lt;\/li>\n\t\t&lt;li>\n\t\t\t&lt;label for=\"comment\">&lt;em class=\"required\">*&lt;\/em> Comment&lt;\/label>\n\t\t\t&lt;textarea name=\"comment\" id=\"comment\" <strong>class=\"required\"<\/strong>>&lt;\/textarea>\n\t\t&lt;\/li>\n\t\t&lt;li class=\"buttons\">&lt;button type=\"submit\">Submit&lt;\/button>&lt;\/li>\n\t&lt;\/ol>\n&lt;\/form><\/code><\/pre>\n\n<p>Since I have an email field, I also need to add the class of <strong>email<\/strong> to the email field:<\/p>\n\n<pre><code>&lt;form action=\"thanks.htm\" method=\"post\">\n\t&lt;ol class=\"forms\">\n\t\t&lt;li>\n\t\t\t&lt;label for=\"name\">&lt;em class=\"required\">*&lt;\/em> Name&lt;\/label>\n\t\t\t&lt;input type=\"text\" name=\"name\" id=\"name\" class=\"required\" \/>\n\t\t&lt;\/li>\n\t\t&lt;li>\n\t\t\t&lt;label for=\"email\">&lt;em class=\"required\">*&lt;\/em> Email&lt;\/label>\n\t\t\t&lt;input type=\"text\" name=\"email\" id=\"email\" class=\"required <strong>email<\/strong>\" \/>\n\t\t&lt;\/li>\n\t\t&lt;li>\n\t\t\t&lt;label for=\"website\">Website&lt;\/label>\n\t\t\t&lt;input type=\"text\" name=\"website\" id=\"website\" \/>\n\t\t&lt;\/li>\n\t\t&lt;li>\n\t\t\t&lt;label for=\"comment\">&lt;em class=\"required\">*&lt;\/em> Comment&lt;\/label>\n\t\t\t&lt;textarea name=\"comment\" id=\"comment\" class=\"required\">&lt;\/textarea>\n\t\t&lt;\/li>\n\t\t&lt;li class=\"buttons\">&lt;button type=\"submit\">Submit&lt;\/button>&lt;\/li>\n\t&lt;\/ol>\n&lt;\/form><\/code><\/pre>\n\n<p>I also want to tell my plugin which forms to validate, so I&rsquo;ll also add a class to the form itself:<\/p>\n\n<pre><code>&lt;form action=\"thanks.htm\" method=\"post\" <strong>class=\"required-form\"<\/strong>>\n\t&lt;ol class=\"forms\">\n\t\t&lt;li>\n\t\t\t&lt;label for=\"name\">&lt;em class=\"required\">*&lt;\/em> Name&lt;\/label>\n\t\t\t&lt;input type=\"text\" name=\"name\" id=\"name\" class=\"required\" \/>\n\t\t&lt;\/li>\n\t\t&lt;li>\n\t\t\t&lt;label for=\"email\">&lt;em class=\"required\">*&lt;\/em> Email&lt;\/label>\n\t\t\t&lt;input type=\"text\" name=\"email\" id=\"email\" class=\"required email\" \/>\n\t\t&lt;\/li>\n\t\t&lt;li>\n\t\t\t&lt;label for=\"website\">Website&lt;\/label>\n\t\t\t&lt;input type=\"text\" name=\"website\" id=\"website\" \/>\n\t\t&lt;\/li>\n\t\t&lt;li>\n\t\t\t&lt;label for=\"comment\">&lt;em class=\"required\">*&lt;\/em> Comment&lt;\/label>\n\t\t\t&lt;textarea name=\"comment\" id=\"comment\" class=\"required\">&lt;\/textarea>\n\t\t&lt;\/li>\n\t\t&lt;li class=\"buttons\">&lt;button type=\"submit\">Submit&lt;\/button>&lt;\/li>\n\t&lt;\/ol>\n&lt;\/form><\/code><\/pre>\n\n<h2>It&rsquo;s JavaScript Time<\/h2>\n<p>Get started by including <a href=\"http:\/\/jquery.com\/\">jQuery<\/a> and <a href=\"http:\/\/github.com\/davist11\/jQuery-Simple-Validate\">my Simple Validate plugin<\/a>. Then, include them on the page:<\/p>\n\n<pre><code>&lt;script type=\"text\/javascript\" src=\"scripts\/jquery.js\">&lt;\/script>\n&lt;script type=\"text\/javascript\" src=\"scripts\/jquery.simpleValidate.min.js\">&lt;\/script><\/code><\/pre>\n\n<p>Now, I just need to call my plugin on any form that has required fields:<\/p>\n<pre><code>$(document).ready(function() {\n\t$('form.required-form').simpleValidate();\n});<\/code><\/pre>\n\n<p>Just like that, the form validation will work, but I want to customize a few of the options. First, I want to change the error element to use an &lt;em> tag instead of a &lt;strong> tag:<\/p>\n\n<pre><code>$(document).ready(function() {\n\t$('form.required-form').simpleValidate(<strong>{\n\t\terrorElement: 'em'\n\t}<\/strong>);\n});<\/code><\/pre>\n\n<p>Then, maybe I decide that I want to submit the form via AJAX. There is no need to add that kind of functionality into the plugin, AJAX is so easy with jQuery. So I just need to tell the plugin that I&rsquo;m going to submit the form with AJAX, and then pass in my callback function which will fire once the form is submitted with no errors:<\/p>\n\n<pre><code>$(document).ready(function() {\n\t$('form.required-form').simpleValidate({\n\t\terrorElement: 'em',\n\t\t<strong>ajaxRequest: true,\n\t\tcompleteCallback: function($el) {\n\t\t\tvar formData = $el.serialize();\n\t\t\t\/\/Do AJAX request with formData variable\n\t\t}<\/strong>\n\t});\n});<\/code><\/pre>\n\n<h3>Options<\/h3>\n<p>Here are all of the available options for the plugin:<\/p>\n<ul>\n\t<li><h4>errorClass: 'error'<\/h4> Class for the error message text<\/li>\n\t<li><h4>errorText: '{label} is a required field.'<\/h4> Structure for the error message text, {label} will be replaced with the associated label text<\/li>\n\t<li><h4>emailErrorText: 'Please enter a valid {label}'<\/h4> Structure for the email error message text, {label} will be replaced with the associated label text<\/li>\n\t<li><h4>errorElement: 'strong'<\/h4> Element to use for the error message text<\/li>\n\t<li><h4>removeLabelChar: '*'<\/h4> If there is an extra character in the label to denote a required field, strip it out<\/li>\n\t<li><h4>inputErrorClass: ''<\/h4> Class to add to an input when it is marked as having an error<\/li>\n\t<li><h4>completeCallback: ''<\/h4> Function to call once the form is error-free<\/li>\n\t<li><h4>ajaxRequest: false<\/h4> If you don't want to use the default form action and want to submit it via AJAX \n<\/ul>\n\n<p><a href=\"http:\/\/trevordavis.net\/play\/jQuery-Simple-Validate\/\">Check out the demo<\/a> and <a href=\"http:\/\/github.com\/davist11\/jQuery-Simple-Validate\">download the plugin from GitHub<\/a>. Let me know if you run into any bugs or have any feature requests.<\/p>","14":{"old_id":{}}}}