You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@tapestry.apache.org by "Markus Joschko (JIRA)" <de...@tapestry.apache.org> on 2008/08/31 18:49:44 UTC
[jira] Created: (TAPESTRY-2631) onBlur display of clientside popups
vs. automatic focusing of first form element
onBlur display of clientside popups vs. automatic focusing of first form element
--------------------------------------------------------------------------------
Key: TAPESTRY-2631
URL: https://issues.apache.org/jira/browse/TAPESTRY-2631
Project: Tapestry
Issue Type: Improvement
Components: tapestry-core
Affects Versions: 5.0.14
Reporter: Markus Joschko
While working with forms I noticed a gotcha that is caused by the onblur display of error popups.
Think about a form where the first field is "required". As it is the first field, the cursor is placed in it automatically after page load.
If the user performs any action on the page the onblur event is triggered and a validation error popup is shown, as he has not yet entered any data.
That's ok if the user is focused on working with the form. But it's problematic if he doesn't care about the form but clicks any other link or anywhere else on the page.
E.g. consider a login form which is always placed on top of the page. The use will always see the validation error when doing something on the page.
Or even stranger (at least for the user): The form itself is in a zone and there is a link that triggers the zone reload to hide the form.
If the user selects this link, the onblur is fired, the validation popup appears and the form disappears. The user is left with only a validation error popup in place.
I think the blur event must be restricted somehow:
1) Do not select the first element automatically. Cons: negative user experience and I guess some browser do this by default.
2) Do not trigger the validation on onblur when the field is empty. Cons: The user has to press "Submit" to get the "required" errors
3) Only trigger validation on onblur when the focus was shifted within the form. That guaranties that the user is busy editing the form and he cares about validation messages.
4) Only accept onblur validation if there was an explicit focus before (listen for keypress&foucs)
Nr. 3) is my personal favorite. However as blur is triggered before the focus event of other elements, it is quite hard to accomplish.
Nr. 2) is easy to implement (an additional if) and I find it sufficient for my use cases. It certainly improves the usability. To add this just modify the initialize method of the FieldEventManager like this:
Tapestry.FieldEventManager.prototype.initialize = function(field)
{
this.field = $(field);
this.field.fieldEventManager = this;
var id = this.field.id;
this.label = $(id + ':label');
this.icon = $(id + ':icon');
this.field.observe("blur", function()
{
if ($F(this.field)) {
this.validateInput(false);
}
}.bindAsEventListener(this));
}
--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.
---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@tapestry.apache.org
For additional commands, e-mail: dev-help@tapestry.apache.org
[jira] Updated: (TAP5-50) Tabbing out of a form, including clicking
a link, causes distracting client-side validations of the field just
exitted
Posted by "Howard M. Lewis Ship (JIRA)" <ji...@apache.org>.
[ https://issues.apache.org/jira/browse/TAP5-50?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]
Howard M. Lewis Ship updated TAP5-50:
-------------------------------------
Summary: Tabbing out of a form, including clicking a link, causes distracting client-side validations of the field just exitted (was: onBlur display of clientside popups vs. automatic focusing of first form element)
> Tabbing out of a form, including clicking a link, causes distracting client-side validations of the field just exitted
> ----------------------------------------------------------------------------------------------------------------------
>
> Key: TAP5-50
> URL: https://issues.apache.org/jira/browse/TAP5-50
> Project: Tapestry 5
> Issue Type: Bug
> Affects Versions: 5.0.15
> Reporter: Markus Joschko
> Assignee: Howard M. Lewis Ship
> Fix For: 5.0.16
>
>
> While working with forms I noticed a gotcha that is caused by the onblur display of error popups.
> Think about a form where the first field is "required". As it is the first field, the cursor is placed in it automatically after page load.
> If the user performs any action on the page the onblur event is triggered and a validation error popup is shown, as he has not yet entered any data.
> That's ok if the user is focused on working with the form. But it's problematic if he doesn't care about the form but clicks any other link or anywhere else on the page.
> E.g. consider a login form which is always placed on top of the page. The use will always see the validation error when doing something on the page.
> Or even stranger (at least for the user): The form itself is in a zone and there is a link that triggers the zone reload to hide the form.
> If the user selects this link, the onblur is fired, the validation popup appears and the form disappears. The user is left with only a validation error popup in place.
> I think the blur event must be restricted somehow:
> 1) Do not select the first element automatically. Cons: negative user experience and I guess some browser do this by default.
> 2) Do not trigger the validation on onblur when the field is empty. Cons: The user has to press "Submit" to get the "required" errors
> 3) Only trigger validation on onblur when the focus was shifted within the form. That guaranties that the user is busy editing the form and he cares about validation messages.
> 4) Only accept onblur validation if there was an explicit focus before (listen for keypress&foucs)
> Nr. 3) is my personal favorite. However as blur is triggered before the focus event of other elements, it is quite hard to accomplish.
> Nr. 2) is easy to implement (an additional if) and I find it sufficient for my use cases. It certainly improves the usability. To add this just modify the initialize method of the FieldEventManager like this:
> Tapestry.FieldEventManager.prototype.initialize = function(field)
> {
> this.field = $(field);
> this.field.fieldEventManager = this;
> var id = this.field.id;
> this.label = $(id + ':label');
> this.icon = $(id + ':icon');
> this.field.observe("blur", function()
> {
> if ($F(this.field)) {
> this.validateInput(false);
> }
> }.bindAsEventListener(this));
> }
--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.
---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@tapestry.apache.org
For additional commands, e-mail: dev-help@tapestry.apache.org
[jira] Closed: (TAP5-50) Tabbing out of a form, including clicking
a link, causes distracting client-side validations of the field just
exitted
Posted by "Howard M. Lewis Ship (JIRA)" <ji...@apache.org>.
[ https://issues.apache.org/jira/browse/TAP5-50?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]
Howard M. Lewis Ship closed TAP5-50.
------------------------------------
Resolution: Fixed
Fix Version/s: 5.0.16
> Tabbing out of a form, including clicking a link, causes distracting client-side validations of the field just exitted
> ----------------------------------------------------------------------------------------------------------------------
>
> Key: TAP5-50
> URL: https://issues.apache.org/jira/browse/TAP5-50
> Project: Tapestry 5
> Issue Type: Bug
> Affects Versions: 5.0.15
> Reporter: Markus Joschko
> Assignee: Howard M. Lewis Ship
> Fix For: 5.0.16
>
>
> While working with forms I noticed a gotcha that is caused by the onblur display of error popups.
> Think about a form where the first field is "required". As it is the first field, the cursor is placed in it automatically after page load.
> If the user performs any action on the page the onblur event is triggered and a validation error popup is shown, as he has not yet entered any data.
> That's ok if the user is focused on working with the form. But it's problematic if he doesn't care about the form but clicks any other link or anywhere else on the page.
> E.g. consider a login form which is always placed on top of the page. The use will always see the validation error when doing something on the page.
> Or even stranger (at least for the user): The form itself is in a zone and there is a link that triggers the zone reload to hide the form.
> If the user selects this link, the onblur is fired, the validation popup appears and the form disappears. The user is left with only a validation error popup in place.
> I think the blur event must be restricted somehow:
> 1) Do not select the first element automatically. Cons: negative user experience and I guess some browser do this by default.
> 2) Do not trigger the validation on onblur when the field is empty. Cons: The user has to press "Submit" to get the "required" errors
> 3) Only trigger validation on onblur when the focus was shifted within the form. That guaranties that the user is busy editing the form and he cares about validation messages.
> 4) Only accept onblur validation if there was an explicit focus before (listen for keypress&foucs)
> Nr. 3) is my personal favorite. However as blur is triggered before the focus event of other elements, it is quite hard to accomplish.
> Nr. 2) is easy to implement (an additional if) and I find it sufficient for my use cases. It certainly improves the usability. To add this just modify the initialize method of the FieldEventManager like this:
> Tapestry.FieldEventManager.prototype.initialize = function(field)
> {
> this.field = $(field);
> this.field.fieldEventManager = this;
> var id = this.field.id;
> this.label = $(id + ':label');
> this.icon = $(id + ':icon');
> this.field.observe("blur", function()
> {
> if ($F(this.field)) {
> this.validateInput(false);
> }
> }.bindAsEventListener(this));
> }
--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.
---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@tapestry.apache.org
For additional commands, e-mail: dev-help@tapestry.apache.org
[jira] Assigned: (TAP5-50) onBlur display of clientside popups vs.
automatic focusing of first form element
Posted by "Howard M. Lewis Ship (JIRA)" <ji...@apache.org>.
[ https://issues.apache.org/jira/browse/TAP5-50?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]
Howard M. Lewis Ship reassigned TAP5-50:
----------------------------------------
Assignee: Howard M. Lewis Ship
> onBlur display of clientside popups vs. automatic focusing of first form element
> --------------------------------------------------------------------------------
>
> Key: TAP5-50
> URL: https://issues.apache.org/jira/browse/TAP5-50
> Project: Tapestry 5
> Issue Type: Bug
> Affects Versions: 5.0.15
> Reporter: Markus Joschko
> Assignee: Howard M. Lewis Ship
>
> While working with forms I noticed a gotcha that is caused by the onblur display of error popups.
> Think about a form where the first field is "required". As it is the first field, the cursor is placed in it automatically after page load.
> If the user performs any action on the page the onblur event is triggered and a validation error popup is shown, as he has not yet entered any data.
> That's ok if the user is focused on working with the form. But it's problematic if he doesn't care about the form but clicks any other link or anywhere else on the page.
> E.g. consider a login form which is always placed on top of the page. The use will always see the validation error when doing something on the page.
> Or even stranger (at least for the user): The form itself is in a zone and there is a link that triggers the zone reload to hide the form.
> If the user selects this link, the onblur is fired, the validation popup appears and the form disappears. The user is left with only a validation error popup in place.
> I think the blur event must be restricted somehow:
> 1) Do not select the first element automatically. Cons: negative user experience and I guess some browser do this by default.
> 2) Do not trigger the validation on onblur when the field is empty. Cons: The user has to press "Submit" to get the "required" errors
> 3) Only trigger validation on onblur when the focus was shifted within the form. That guaranties that the user is busy editing the form and he cares about validation messages.
> 4) Only accept onblur validation if there was an explicit focus before (listen for keypress&foucs)
> Nr. 3) is my personal favorite. However as blur is triggered before the focus event of other elements, it is quite hard to accomplish.
> Nr. 2) is easy to implement (an additional if) and I find it sufficient for my use cases. It certainly improves the usability. To add this just modify the initialize method of the FieldEventManager like this:
> Tapestry.FieldEventManager.prototype.initialize = function(field)
> {
> this.field = $(field);
> this.field.fieldEventManager = this;
> var id = this.field.id;
> this.label = $(id + ':label');
> this.icon = $(id + ':icon');
> this.field.observe("blur", function()
> {
> if ($F(this.field)) {
> this.validateInput(false);
> }
> }.bindAsEventListener(this));
> }
--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.
---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@tapestry.apache.org
For additional commands, e-mail: dev-help@tapestry.apache.org
[jira] Commented: (TAPESTRY-2631) onBlur display of clientside
popups vs. automatic focusing of first form element
Posted by "Howard M. Lewis Ship (JIRA)" <de...@tapestry.apache.org>.
[ https://issues.apache.org/jira/browse/TAPESTRY-2631?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=12628495#action_12628495 ]
Howard M. Lewis Ship commented on TAPESTRY-2631:
------------------------------------------------
This has bothered me as well, and I'm looking at how to accomplish option #3 ... blur validation only occurs if you tab between fields within the same form.
> onBlur display of clientside popups vs. automatic focusing of first form element
> --------------------------------------------------------------------------------
>
> Key: TAPESTRY-2631
> URL: https://issues.apache.org/jira/browse/TAPESTRY-2631
> Project: Tapestry
> Issue Type: Improvement
> Components: tapestry-core
> Affects Versions: 5.0.14
> Reporter: Markus Joschko
>
> While working with forms I noticed a gotcha that is caused by the onblur display of error popups.
> Think about a form where the first field is "required". As it is the first field, the cursor is placed in it automatically after page load.
> If the user performs any action on the page the onblur event is triggered and a validation error popup is shown, as he has not yet entered any data.
> That's ok if the user is focused on working with the form. But it's problematic if he doesn't care about the form but clicks any other link or anywhere else on the page.
> E.g. consider a login form which is always placed on top of the page. The use will always see the validation error when doing something on the page.
> Or even stranger (at least for the user): The form itself is in a zone and there is a link that triggers the zone reload to hide the form.
> If the user selects this link, the onblur is fired, the validation popup appears and the form disappears. The user is left with only a validation error popup in place.
> I think the blur event must be restricted somehow:
> 1) Do not select the first element automatically. Cons: negative user experience and I guess some browser do this by default.
> 2) Do not trigger the validation on onblur when the field is empty. Cons: The user has to press "Submit" to get the "required" errors
> 3) Only trigger validation on onblur when the focus was shifted within the form. That guaranties that the user is busy editing the form and he cares about validation messages.
> 4) Only accept onblur validation if there was an explicit focus before (listen for keypress&foucs)
> Nr. 3) is my personal favorite. However as blur is triggered before the focus event of other elements, it is quite hard to accomplish.
> Nr. 2) is easy to implement (an additional if) and I find it sufficient for my use cases. It certainly improves the usability. To add this just modify the initialize method of the FieldEventManager like this:
> Tapestry.FieldEventManager.prototype.initialize = function(field)
> {
> this.field = $(field);
> this.field.fieldEventManager = this;
> var id = this.field.id;
> this.label = $(id + ':label');
> this.icon = $(id + ':icon');
> this.field.observe("blur", function()
> {
> if ($F(this.field)) {
> this.validateInput(false);
> }
> }.bindAsEventListener(this));
> }
--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.
---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@tapestry.apache.org
For additional commands, e-mail: dev-help@tapestry.apache.org