Opened 8 years ago

Closed 8 years ago

#13523 closed enhancement (wontfix)

dijit.Dialog - allow for some before close validation

Reported by: PEM Owned by:
Priority: high Milestone: 1.7
Component: Dijit Version: 1.7.0b1
Keywords: dialog Cc: bill
Blocked By: Blocking:

Description

The poitn is to give a function to the user to run some validation checks before the Dialog hides and which result would either confirm or cancel the hiding.

for example :

You have your dialog, and inside a TabContainer? with two tabs. In each tab you have form input fields that are required. When the user click either on the X or on a Validate / Cancel button, you need to make sure that all the input fields are valid.

Attachments (1)

Dialog.diff (1.2 KB) - added by PEM 8 years ago.
patch to allow pre-hide validation

Download all attachments as: .zip

Change History (8)

Changed 8 years ago by PEM

Attachment: Dialog.diff added

patch to allow pre-hide validation

comment:1 Changed 8 years ago by PEM

You can find an example here : http://dojo-sandbox.net/public/2f035/2 It's up to the user to notify the user why the X button does not close the dialog. The user could use a simple alert like in the overriden onBeforeHide function :

    alert("you should tick the checkbox before closing the dialog !");

Or select a tab where an input field is in error state, use a tooltip, call a callBack function, etc.

Version 2, edited 8 years ago by PEM (previous) (next) (diff)

comment:2 Changed 8 years ago by PEM

Of course the example above is simplistic, but you could imagine having a callback function that you would be called from onBeforeHide (hitching the context), and that would have access to the clicked button's value so that if a cancel was clicked, do nothing and close the dialog, if ok or validate was clicked, then do the checks first...

Last edited 8 years ago by PEM (previous) (diff)

comment:3 in reply to:  2 Changed 8 years ago by PEM

Replying to PEM_FR:

I updated the example since some people were missing the point of the patch :)

Last edited 8 years ago by PEM (previous) (diff)

comment:4 Changed 8 years ago by bill

I don't think I've ever seen a dialog where the [X] button triggers validation code. I've often seen dialogs with no [x] button, but instead OK/cancel buttons inside the dialog, and where the OK button triggers validation. (On a side note, [X] usually implies cancel, which would mean no validation.)

Can you give an example of a dialog where the [X] button triggers validation code? (If not on the web, then some standard windows or mac dialog.)

comment:5 in reply to:  4 Changed 8 years ago by PEM

For example in a protected by login page. In order to access the page you have a login dialog with a button OK and the [X] and you do not want to allow the user to "cancel" the dialog, it is either login or close the browser tab.

Another example is when you have a loading dialog, stating that you are curently loading something, or calculating something, and that you don't want the user to close the dialog untill the loading is complete. then either OK or [X] should do pre-closing validation checks.

In those case you could grey the OK button, but what about the [X]. I think it'd be also nice to provide a standard way to handle the pre-closing validation for all the cases when the closing is allowed upon certain conditions.

Another example would be having a big form in a dialog. You have the buttons OK / Cancel and the [X]

onButtonClick, if OK you want to check that all the fields are valids, on Cancel, you want to test if some fields have been filled, and if so, ask the user if he really want to cancel, informing him that he'll lose everything he filled. (prevent missclick on cancel after filling all your form)

Of course clicking on the cross should provide the same behaviour for consitency reasons.

Replying to bill:

I don't think I've ever seen a dialog where the [X] button triggers validation code. I've often seen dialogs with no [x] button, but instead OK/cancel buttons inside the dialog, and where the OK button triggers validation. (On a side note, [X] usually implies cancel, which would mean no validation.)

Can you give an example of a dialog where the [X] button triggers validation code? (If not on the web, then some standard windows or mac dialog.)

comment:6 Changed 8 years ago by PEM

To make a long story short, this contribution :

  • is backward compatible
  • allow to hook onBeforeHide, so just before hiding the dialog
  • allow the user to perform checks, or execute code right before hiding/closing
  • does not cost much in bytes or perf (here it's 1.2KB because of the comments)
  • allow to fix a consistency problem in the case you would want to run checks on a cancel button (then the [X] would do the same as the cancel button)

comment:7 Changed 8 years ago by bill

Resolution: wontfix
Status: newclosed

I was actually asking for real-world examples, sorry for the confusion. We had a long conversation about this on IRC. The one example PEM thought of was with applications (ex: Microsoft Word). Word prompts the user with a "save work before closing?" alert if you try to close Word with unsaved changes. But I think they would want a different widget for that case anyway (something with minimize/maximize/close icons).

Anyway, I understand the patch is backwards-compatible, opt-in, and so forth. I'm just very careful to add any new features to dijit that don't correspond to standard UI paradigms (or whatever the phrase in). So, I'm not going to put this in for now; if we get more requests I'll reconsider.

About the patch itself, technically, I think the only thing I would change would be to only run the confirm code when the user clicked the [X], not when hide() was called programatically.

Note: See TracTickets for help on using tickets.