[jQuery] Re: Validate RC2 Preview: Remember The Milk Signup
R. Rajesh Jeba Anbiah wrote: To be honest, having inspired by validation plugin, I thought of hacking an adopter for it. But, later I found that it's too un- intuitive to try to bend CakePHP rules for validation plugins; it will be just easy to dump CakePHP rules in JSON and write a simple jQuery code to do the validation. That may be true, but lacks validation that goes beyond required, validation on submit, hiding error messages... Basically you are replicating a very small subset of the validation plugin, and while being useful, I don't yet see the value here. -- Jörn Zaefferer http://bassistance.de
[jQuery] Re: Validate RC2 Preview: Remember The Milk Signup
This is fantastic. A few of us in #cakephp are strong jQuery
advocates and we discussed this very thing as we want 'DRY'
conventions. We were thinking of a helper, but if it can be done as a
helper, or at the core that would be fantastic.
Can't wait to see this in action.
On 6/16/07, R. Rajesh Jeba Anbiah [EMAIL PROTECTED] wrote:
On Jun 14, 12:27 am, Jörn Zaefferer [EMAIL PROTECTED] wrote:
R.RajeshJebaAnbiahwrote:
On Jun 13, 9:45 pm, Jörn Zaefferer [EMAIL PROTECTED] wrote:
R.RajeshJebaAnbiahwrote:FWIW, it's no way related to the plugin,
but I have patched CakePHP
to dump the validation rules in JSON
https://trac.cakephp.org/ticket/2359;
I think, this will help to have only one rule.
Thanks. With that it shouldn't be difficult to dump rules that work
with
the validation plugin.
The idea was impressed by validation plugin. But, I found that the
validation rules of CakePHP differs to the one of validation plugin;
with the JSON dumping, it would be easier to achieve the same result
in jQuery.
I guess that scenario can be found at every serverside validation
framework. Considering that it is impossible to provide a common
denominator for all of those, an adapter seems to be the better idea.
There should be always some kind of required-method.
snip
To be honest, having inspired by validation plugin, I thought of
hacking an adopter for it. But, later I found that it's too un-
intuitive to try to bend CakePHP rules for validation plugins; it will
be just easy to dump CakePHP rules in JSON and write a simple jQuery
code to do the validation. This way, one can just follow the CakePHP
validation code and translate it to jQuery easily. The simple code, I
came up with for CakePHP rules (not complete) is:
//Logic: Extract validation rule which is in JSON from class attribute
// on blur of input elements, validate--on error append error div
$('div.input').each(function () {
var m = /validation:{(.*)}/.exec($(this).attr('class'));
if (m[1]) {
$('input', $(this)).blur(function () {
var validation = eval('({' + m[1] + '})');
$(this).siblings('div.error-message').remove();
if (!validation['allowEmpty'] !$(this).val()) {
$(this).parent().append('div class=error-message'
+ validation['message'] + '/div').fadeIn();
}
});
}
});
--
?php echo 'Just another PHP saint'; ?
Email: rrjanbiah-at-Y!comBlog: http://rajeshanbiah.blogspot.com/
--
Tane Piper
http://digitalspaghetti.tooum.net
This email is: [ ] blogable [ x ] ask first [ ] private
[jQuery] Re: Validate RC2 Preview: Remember The Milk Signup
On Jun 13, 12:48 am, Jörn Zaefferer [EMAIL PROTECTED] wrote: Fabien Meghazi wrote: Maybe what I want to do is pointless or too complicated. I'm curious to know how do you manage double client/server side validation in your applications ? No, its no pointless at all. Its a very important issue, something I'd like to deal with on a more long term issue. So far I've concentrated on the client side. So far I'm using the validation plugin in one application, using JSF as the serverside MVC framework. Defining basic validation rules looks like this: snip FWIW, it's no way related to the plugin, but I have patched CakePHP to dump the validation rules in JSON https://trac.cakephp.org/ticket/ 2359; I think, this will help to have only one rule. -- ?php echo 'Just another PHP saint'; ? Email: rrjanbiah-at-Y!comBlog: http://rajeshanbiah.blogspot.com/
[jQuery] Re: Validate RC2 Preview: Remember The Milk Signup
R. Rajesh Jeba Anbiah wrote: FWIW, it's no way related to the plugin, but I have patched CakePHP to dump the validation rules in JSON https://trac.cakephp.org/ticket/ 2359; I think, this will help to have only one rule. Thanks. With that it shouldn't be difficult to dump rules that work with the validation plugin. -- Jörn Zaefferer http://bassistance.de
[jQuery] Re: Validate RC2 Preview: Remember The Milk Signup
On Jun 13, 9:45 pm, Jörn Zaefferer [EMAIL PROTECTED] wrote: R.RajeshJebaAnbiahwrote:FWIW, it's no way related to the plugin, but I have patched CakePHP to dump the validation rules in JSON https://trac.cakephp.org/ticket/2359; I think, this will help to have only one rule. Thanks. With that it shouldn't be difficult to dump rules that work with the validation plugin. The idea was impressed by validation plugin. But, I found that the validation rules of CakePHP differs to the one of validation plugin; with the JSON dumping, it would be easier to achieve the same result in jQuery. -- ?php echo 'Just another PHP saint'; ? Email: rrjanbiah-at-Y!comBlog: http://rajeshanbiah.blogspot.com/
[jQuery] Re: Validate RC2 Preview: Remember The Milk Signup
R. Rajesh Jeba Anbiah wrote: On Jun 13, 9:45 pm, Jörn Zaefferer [EMAIL PROTECTED] wrote: R.RajeshJebaAnbiahwrote:FWIW, it's no way related to the plugin, but I have patched CakePHP to dump the validation rules in JSON https://trac.cakephp.org/ticket/2359; I think, this will help to have only one rule. Thanks. With that it shouldn't be difficult to dump rules that work with the validation plugin. The idea was impressed by validation plugin. But, I found that the validation rules of CakePHP differs to the one of validation plugin; with the JSON dumping, it would be easier to achieve the same result in jQuery. I guess that scenario can be found at every serverside validation framework. Considering that it is impossible to provide a common denominator for all of those, an adapter seems to be the better idea. There should be always some kind of required-method. I wonder if that adapter should be on the client- or on the server-side. Eg. modify that JSON dumper to adapt CakePHPs rules to the one of the plugin, or put that JSON dump through a bit wrangling before passing it to the plugin. -- Jörn Zaefferer http://bassistance.de
[jQuery] Re: Validate RC2 Preview: Remember The Milk Signup
Fabien Meghazi wrote:
Maybe what I want to do is pointless or too complicated.
I'm curious to know how do you manage double client/server side
validation in your applications ?
No, its no pointless at all. Its a very important issue, something I'd
like to deal with on a more long term issue. So far I've concentrated on
the client side.
So far I'm using the validation plugin in one application, using JSF as
the serverside MVC framework. Defining basic validation rules looks like
this:
h:inputText value=${search.term} required=true styleClass={required:true}
/
That tag produces something like this:
input type=text name=someformid:_term class={required:true} /
A better solution would generate the additional class info as soon as
I'm specifying required=true. That isn't too hard to achieve with JSF.
The good thing of this approach is that you can simply select a forms on
your page (maybe filtered by a marked class like validate) and apply
the validation plugin to it. Rules are defined inline, so you don't have
any issues associating rules with fields.
The bad thing is all that inline stuff that is meaningless without JS.
More complex validation rules, like dynamic dependency-checks, can mess
up your markup.
I recommend to build a solution that generates JSON used by the
validation plugin, based on some serverside rules. I see the biggest
difficulty with linking rules to forms and fields.
--
Jörn Zaefferer
http://bassistance.de
[jQuery] Re: Validate RC2 Preview: Remember The Milk Signup
Is this a beta version of RC2? :-) I've uploaded a preview demo of the upcoming RC2 release of the validation plugin. It features the signup form of Remember The Milk: http://jquery.bassistance.de/validate-milk/demo-test/milk.html
[jQuery] Re: Validate RC2 Preview: Remember The Milk Signup
Mike Alsup wrote: Is this a beta version of RC2? :-) Oh well. There is still much to learn :-) -- Jörn Zaefferer http://bassistance.de
[jQuery] Re: Validate RC2 Preview: Remember The Milk Signup
Exciting!
Here would be my (humble) suggestions:
1. Required fields. As a general rule, you should have a * asterisk to the
left or right of the input field in a straight vertical line to indicate
required. Bold is ok, but it's not quite enough to let the user know.
2. When the user clicks submit, it puts all these words on the right in
red. Its sort of overwhelming. Highlighting the input field is more
important than red to the right. Red to the right makes more sense as
Inline errors. Like email or password format.
3. It still could use something at the top. Like You missed X field(s).
They have been highlighted below. This implies you should scroll to the top
of the form when submit with this kind of error. Think of a long form,
where the user clicks submit and missed the very first field. It would be
offscreen otherwise.
4. When doing it right, the checkbox is a nice touch, but I would make it a
little more subtle. Additionally, use Swiss Design techniques. This means
everything lines up. So all the checks line up vertically.
5. As a general rule, I usually make form fields taller. Users have
terrible fine motor skills. A big box is easier to input. Check out the
username and password fields in Wordpress. http://www.commadot.com/wp-admin
6. Onblur of the password field. it's usually good practice to erase the
field once you have a mismatch. It's near impossible to try to fix it with
the stars there. Maybe that could be an option in the setup? like
errorClearInput: false; or whatever.
7. Looking at the setup. I like the {0} to represent the number, but what
if the number is 1. Then it would say, Enter at least 1 characters.
Singular vs. Plural. It's a nitpick to be sure, but it's good grammar. if
you could say minLength: String.format(Enter at least {0} character{s})
or whatever...something to say greater than 1 gets this otherwise, default.
It's not critical, but its a nice to have.
I recently just launched a form that I tried, but couldn't use the
validation plugin..
Check out the form. I actually have some issues with it, but its ok.
http://app.marketo.com/signup/signup/code/standard
Notice the tooltip on the password. I used hoverIntent. Cool plugin. That
would be a kickass addition to your validator.
Like have a hint declaration which would insert a questionmark with hover
attached. And if hoverIntent exists, then it could use that instead?
Anyway, I hope this helps out some. :)
Glen
On 6/11/07, Jörn Zaefferer [EMAIL PROTECTED] wrote:
Hi,
I've uploaded a preview demo of the upcoming RC2 release of the
validation plugin. It features the signup form of Remember The Milk:
http://jquery.bassistance.de/validate-milk/demo-test/milk.html
The plugin handles keypress- and blur- for normal input elements and
change-events for radio/checkbox buttons. It tries to give feedback to
the user as early as possible, without disturbing with messages before
the user had a chance to enter the correct value. In other words: You
can tab through the fields without seeing a single error message pop up.
Once you start entering something in a field and blur, it gets
validated. If you go back and correct the entered value, it gets
validated on instant, showing you a success-icon. Radio and checkbox
buttons get validated once you change them (using keyboard or mouse).
Once an error message is displayed for a field, eg. when you click
submit and the field is invalid, the plugin updates the validation
status as soon as possible.
Give it a try, your feedback is priceless.
--
Jörn Zaefferer
http://bassistance.de
[jQuery] Re: Validate RC2 Preview: Remember The Milk Signup
Glen Lipka wrote:
Exciting!
Here would be my (humble) suggestions:
1. Required fields. As a general rule, you should have a * asterisk
to the left or right of the input field in a straight vertical line to
indicate required. Bold is ok, but it's not quite enough to let the
user know.
2. When the user clicks submit, it puts all these words on the right
in red. Its sort of overwhelming. Highlighting the input field is
more important than red to the right. Red to the right makes more
sense as Inline errors. Like email or password format.
Gonna work on that, though with a different example.
3. It still could use something at the top. Like You missed X
field(s). They have been highlighted below. This implies you should
scroll to the top of the form when submit with this kind of error.
Think of a long form, where the user clicks submit and missed the very
first field. It would be offscreen otherwise.
That is something the error container should be good for.
4. When doing it right, the checkbox is a nice touch, but I would make
it a little more subtle. Additionally, use Swiss Design techniques.
This means everything lines up. So all the checks line up vertically.
I konw the Swiss army knife, but hadn't heard of Swiss Design. Its
mostly a CSS/layout issue, but nonetheless important.
5. As a general rule, I usually make form fields taller. Users have
terrible fine motor skills. A big box is easier to input. Check out
the username and password fields in Wordpress.
http://www.commadot.com/wp-admin
Yeah, those are hard to miss.
6. Onblur of the password field. it's usually good practice to erase
the field once you have a mismatch. It's near impossible to try to
fix it with the stars there. Maybe that could be an option in the
setup? like errorClearInput: false; or whatever.
I don't like that clearing for other fields, but I agree that its good
for password fields. Thats the behaviour most users should be used to
anyway (eg. OS login, PIN numbers)
7. Looking at the setup. I like the {0} to represent the number, but
what if the number is 1. Then it would say, Enter at least 1
characters. Singular vs. Plural. It's a nitpick to be sure, but it's
good grammar. if you could say minLength: String.format(Enter at
least {0} character{s}) or whatever...something to say greater than
1 gets this otherwise, default. It's not critical, but its a nice to
have.
Tricky, but not impossible. I see what I can do about it.
I recently just launched a form that I tried, but couldn't use the
validation plugin..
Check out the form. I actually have some issues with it, but its ok.
http://app.marketo.com/signup/signup/code/standard
http://app.marketo.com/signup/signup/code/standard
Gonna take that as the base for the next example to work on.
Notice the tooltip on the password. I used hoverIntent. Cool
plugin. That would be a kickass addition to your validator.
Like have a hint declaration which would insert a questionmark with
hover attached. And if hoverIntent exists, then it could use that
instead?
I really have to check how to build a nice tooltip plugin on top of
hoverIntent.
Anyway, I hope this helps out some. :)
Thanks again, Glen!
--
Jörn Zaefferer
http://bassistance.de
[jQuery] Re: Validate RC2 Preview: Remember The Milk Signup
http://en.wikipedia.org/wiki/International_Typographic_Style
Doesn't say much about it, but that is probably appropriate. :)
Basically it means designing with an invisible grid that everything lines up
to.
Glen
On 6/11/07, Jörn Zaefferer [EMAIL PROTECTED] wrote:
Glen Lipka wrote:
Exciting!
Here would be my (humble) suggestions:
1. Required fields. As a general rule, you should have a * asterisk
to the left or right of the input field in a straight vertical line to
indicate required. Bold is ok, but it's not quite enough to let the
user know.
2. When the user clicks submit, it puts all these words on the right
in red. Its sort of overwhelming. Highlighting the input field is
more important than red to the right. Red to the right makes more
sense as Inline errors. Like email or password format.
Gonna work on that, though with a different example.
3. It still could use something at the top. Like You missed X
field(s). They have been highlighted below. This implies you should
scroll to the top of the form when submit with this kind of error.
Think of a long form, where the user clicks submit and missed the very
first field. It would be offscreen otherwise.
That is something the error container should be good for.
4. When doing it right, the checkbox is a nice touch, but I would make
it a little more subtle. Additionally, use Swiss Design techniques.
This means everything lines up. So all the checks line up vertically.
I konw the Swiss army knife, but hadn't heard of Swiss Design. Its
mostly a CSS/layout issue, but nonetheless important.
5. As a general rule, I usually make form fields taller. Users have
terrible fine motor skills. A big box is easier to input. Check out
the username and password fields in Wordpress.
http://www.commadot.com/wp-admin
Yeah, those are hard to miss.
6. Onblur of the password field. it's usually good practice to erase
the field once you have a mismatch. It's near impossible to try to
fix it with the stars there. Maybe that could be an option in the
setup? like errorClearInput: false; or whatever.
I don't like that clearing for other fields, but I agree that its good
for password fields. Thats the behaviour most users should be used to
anyway (eg. OS login, PIN numbers)
7. Looking at the setup. I like the {0} to represent the number, but
what if the number is 1. Then it would say, Enter at least 1
characters. Singular vs. Plural. It's a nitpick to be sure, but it's
good grammar. if you could say minLength: String.format(Enter at
least {0} character{s}) or whatever...something to say greater than
1 gets this otherwise, default. It's not critical, but its a nice to
have.
Tricky, but not impossible. I see what I can do about it.
I recently just launched a form that I tried, but couldn't use the
validation plugin..
Check out the form. I actually have some issues with it, but its ok.
http://app.marketo.com/signup/signup/code/standard
http://app.marketo.com/signup/signup/code/standard
Gonna take that as the base for the next example to work on.
Notice the tooltip on the password. I used hoverIntent. Cool
plugin. That would be a kickass addition to your validator.
Like have a hint declaration which would insert a questionmark with
hover attached. And if hoverIntent exists, then it could use that
instead?
I really have to check how to build a nice tooltip plugin on top of
hoverIntent.
Anyway, I hope this helps out some. :)
Thanks again, Glen!
--
Jörn Zaefferer
http://bassistance.de
