Wow! Thanks for the explanation, Nicolas!
I'll take a good look at it...looks very good!
Rick
On Wed, Jun 3, 2009 at 3:41 PM, Nicolas R <ruda...@googlemail.com> wrote:
>
> Rick,
> as I said above, there are really no validation routines at the
> moment. Think of it like jQuery itself which you can extend by
> $.extend or $.fn but without its core methods. I know that its a bit
> tricky to grasp mainly because it doesn't do much out of the box.
>
> I'll try to explain a bit here and perhaps I'll do a wiki page on the
> project's site (the source and test files at the trunk may also be of
> use)
>
> There are three main methods:
> 1) $.user_input(options) - set validation rules that you can reuse in
> other projects or project-specific
> 2) $(selector).user_input(options) - attach validation rules to
> selected elements
> 3) $(selector).check_user_input(option) - check selected elements for
> validity
>
>
> $.user_input(options) - has 3 options to be passed, all 3 are
> required.
>
> first is the type of rule you want to set (e.g. 'value', 'event',
> 'error' (callback), etc)
> second is the name of the rule (e.g. 'required', 'blur',
> 'change_my_color', etc)
> third argument is the callback function that will be called. ie. if
> the type is 'value', the function is used to check the validity of an
> element's value. if its an 'event', it is called when you attach
> validation on an element (the 2nd methodabove). If its an 'error',
> 'cleanup', 'success', 'before', or 'complete' callback it is called
> appropriately. (whatever your error callback returns, is passed on the
> cleanup callback so that you can clean up error messages)
>
>
> $(selector).user_input(options) - can accept two options, but for now
> I'll focus on just one, the validation rules which is a key/value
> object.
>
> For example,
> $('.required').user_input({
> value: 'required',
> event: 'blur',
> error: 'change_my_color',
> success: 'change_my_color',
> cleanup: function(){ this.remove && this.remove() }
>
> });
> When this method is called, the event you specified as 'blur' (using
> the first method above) will be called. I assume that such a rule will
> bind a blur event. So, the callback you defined above as 'blur' must
> bind a blur event. When that event is triggered, it will check the
> element's value against your 'required' value method (again specified
> from method 1 above). If your 'required' value method returns TRUE,
> it's value is considered as valid. Otherwise it's not valid. At that
> point your error method named 'change_my_colour' is triggered. If
> your error method returns jQuery elements, those elements will be
> passed on the cleanup function once the element is re-validated and is
> found to be valid. At that point the success callback is triggered.
>
> The third and final method, $(selector).check_user_input(option), is
> the method that actually triggers validation the selected elements.
> The option parameter is the type of the event which you want to check
> (e.g. blur). If you leave this empty it will check all events. This
> method returns TRUE or FALSE according to whether the elements checked
> are valid or not. You should call this method from your event rules
> (e.g. blur event) so that validation actually occurs, otherwise it
> does nothing.
>
> Another useful feature is the fact that whenever a function is called
> (either error callback, or value check etc) it is passed the original
> key/value object you defined for that element (method 3). In this way
> you can have some sort of generic callbacks that behave differently
> according to the options you passed when you attached a validation to
> some elements.
>
> I hope this makes some sense. If you check this
>
> http://code.google.com/p/jqueryuserinput/source/browse/trunk/jquery.user_input.js
> at the bottom you can see how rules are applied (first and third
> methods). This
> http://code.google.com/p/jqueryuserinput/source/browse/trunk/test.js
> shows how to attach validation on your elements and how to extend/
> override existing rules.
>
>
>
> On Jun 3, 7:42 pm, Rick Faircloth <r...@whitestonemedia.com> wrote:
> > Yes, it looks like a great idea. I've been writing my own validation
> > routines anyway,
> > preferring the ability to customize every aspect of the validation
> routines
> > and presentation.
> >
> > I'm interested in learning more, especially about your specific
> validation
> > routines.
> >
> > Rick
> >
> > On Wed, Jun 3, 2009 at 11:51 AM, Penner, Matthew <mpen...@valverde.edu
> >wrote:
> >
> >
> >
> >
> >
> > > 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) athttp://code.google.com/p/jqueryuserinput/
> >
> > > Cheers
> >
> > --
> >
> --------------------------------------------------------------------------------------------------------------------------------------------------
> > "Ninety percent of the politicians give the other ten percent a bad
> > reputation." Henry Kissinger
>
>
--
--------------------------------------------------------------------------------------------------------------------------------------------------
"Ninety percent of the politicians give the other ten percent a bad
reputation." Henry Kissinger
