Hey Nicolas, Great work! I really like this idea. Maybe you can put the explanation and examples from your email onto the web site. I've bookmarked the page for future reference but this email really gives a quick summary on what you are trying to accomplish and how to use it.
Thanks, Matt Penner -----Original Message----- From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On Behalf Of Nicolas R Sent: Wednesday, June 03, 2009 3:06 AM To: jQuery (English) Subject: [jQuery] A new take on form validation, need code review and feedback Hello all, I feel a bit guilty for posting this here as it may be considered as spam, so if you do think that please ignore/delete. For the last couple of days I've been working on a form validation plugin and I've taken a completely different approach (I think, that is) from what already exists. The result is a plugin with less than 300 lines of code that does absolutely no form validation at all. WTF you may very well ask, and I explain: the core of the plugin basically assigns/save 'rules' and callbacks on an object. One way to save/create a rule is when extending the plugin, i.e. adding validation rules, onerror/onsucces callbacks and the like. Another is when you actually 'bind' validation on a form or element. And that is all. So here is an example: The rules defined here are generic, they dont apply to specific dom elements. This lets say is how I want my validation to behave. I define a rule for the value of an element. I.e. what the value must be. $.user_input('value','required',function(elem,value,rule) { return value && value.length !== 0; }); Then define an event that will trigger the validation: $.user_input('event','blur',function(el) { el.unbind('blur.user_input').bind('blur.user_input',function(e,event) { return $(this).check_user_input(e); }); }); Then define some callbacks: $.user_input('error','change_my_color',function(el) { el.css('background-color','red'); }); $.user_input('success','change_my_color',function(el) { el.css('background-color',''); }); At this stage these are the validation rules for this plugin. Now I have to attach those rules to some elements that I want to validate. $('.required').user_input({ value: 'required', event: 'blur', error: 'change_my_color', success: 'change_my_color' }); So when an input with class required is blurred, it validates its value against the 'required' value rule. If it returns something other than true, it triggers the 'change_my_colour' error callback. If it returns true, it triggers the 'change_my_colour' success callback. There's also another nice 'side effect' of the approach taken. If you append a new input with class required in the dom, the script will also validate that one (think of live validation). Even though this depends on how you actually define your events (i.e. die/live, or unbind/bind) you can also validate all elements (including the new one) by doing: $('.required').check_user_input('blur') where the param passed is the name of the event to check (or leave empty to check all binded events). As I said, this is very flexible because it doesn't do much 'out of the box'. I am posting it here because I would love to listen to what the community thinks of this approach and get some feedback/code review. Thanks for reading this far, you can get the source (and a very simple demo) at http://code.google.com/p/jqueryuserinput/ Cheers
