Password confirmation and z-order

[mollycm]

Hello,

I need a re-enter password confirmation/validation based on the input into two password inputs. I followed this helpful post to get the show/hide function working: Show Hide Password Toggle

But I’ve been unable to figure out how to get the confirm password validation to work based on checking what’s input into either of those fields. Unfortunately the client is insisting on the re-enter password field, so need to get it working.

I’d also like to keep the error messages as Dynamic Panels to tie them to the error field outlines and so we can easily show different errors based on varying inputs. However, Dynamic Panels don’t seem to allow bringing things to the front? I need the input fields ordered bottom to top to get the Z-index/tab function working but that means the password error message is underneath the re-enter password label.

Any help is greatly appreciated!

Uploading: 01_Re-enter password and z-order.rp…

[davegoodman]

Your file doesn’t appear to have uploaded. However, you can do a password checking mechanic by setting a global variable from field 1, then checking whether field 2 matches it with an OnKeyUp interaction.

With the error states, you can hide the whole dynamic panel at the correct z index, then use your field tests to set them to different states (password format, non-matching etc), then show them.

[mollycm]

01_Re-enter passowrd and z-order.rp (645.2 KB)

Thanks! Here’s the file. I’m not sure I’m following the second part. I think

[davegoodman]

I took a look and it was possible to do what you want without hiding/showing. You just needed to reverse the component order.

01_Re-enter passowrd and z-order-reordered.rp (645.2 KB)

Widgets that are higher up in the outline on the left are higher in the Z index. So you just need to put things in the order which you would like them to overlap.

If you wanted to push the text and other fields up and down, then you can attach a ‘Push/pull widgets’ interaction to the fields that will fire when the dynamic panel changes state.

[mollycm]

Thank you, thank you!

I guess I am also not sure about the first part, I think that’s the problem, I don’t know how to “check” what function is that? I think I get the global variable part. I’d also like it to check for matching On Lost Focus. 01_Re-enter passowrd and z-order-reordered.rp (643.8 KB)

[davegoodman]

• OnLostFocus for Field 1, set your global variable EnteredPassword to the content of the text field
• The user then moves to Field 2 and starts typing. Add a case to Field 2, after KeyUp, waits 1000-2000ms, then checks whether the contents of Field 2 matches the global variable. I guess you could compare it directly to Field 1 if you weren’t doing the show password thing with two fields, but a global variable is easier to update and check from multiple sources.
• If it matches, set both fields to their green ‘passwords match’ state
• If it doesn’t match, set your error message to ‘doesn’t match’ state and show it

The delay in step 2 is to stop the error firing immediately after the keyup - this is annoying if you’re a user who hasn’t finished typing your password.

[mollycm]

Thanks! I think I got it now. That’s what I was trying at first but I think I had something slightly off. Thanks again for all your help!

[mollycm]

Sorry, but I’m back This is in response to the overlapping error text issue (should have looked a bit closer, my bad). The problem is I need to have them ordered the opposite way so that when I hit tab from the password field it will focus in the re-enter password field. It seems to be either one or the other.

Organizing Widgets · Axure Docs

So do I need to use the show hide vs. dynamic panel after all?

[Ritch]

Hi Molly

The Z order is not the only way to control the tab order. If you are still stuck just post here.

[davegoodman]

Ah, I see. There’s three ways to show/hide a dynamic panel. The first is to have a default state with nothing in it. The second way is to hide the dynamic panel, but then tick the box that says ‘show if hidden’ when you change the panel’s state.

The third way is to hide the dynamic panel, change the dynamic panel’s state, then have a separate action to show the panel. This will then allow you to use the ‘bring to front’ option, making your layering order irrelevant.

[mollycm]

Hi Ritch,

I didn’t know that. Can you explain?

Thanks!

[Ritch]

HI Molly

This example tabs through a Cycle of the fields a, b, c, even though the Z order is a c b.

The tab order is forced using the focs action on thelostFocus event.

The initial focus is set on a using the page loaded event.

The “dummy” is required to stop the browswer catching the first/last lost focus event and overriding the axure logic. It has to be at the top in the z-order and visible but the border and fill can be made transparent to effectively hide it.

It always works in Firefox (best browser for Axure) but seems to intermittentlt fail in chrome. (it used to work in all browsers in axure 8! as far as I can rememer!).

Hope it helps.

Best, RitchtabOrderForced.rp (46.5 KB)

[mollycm]

Thanks! I’ll try this.