New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Validation error don't tell the user what they need to fix it #604

Closed
kleinsch opened this Issue Sep 11, 2013 · 16 comments

Comments

Projects
None yet
5 participants
@kleinsch
Contributor

kleinsch commented Sep 11, 2013

Specific example: customer enters too many characters for appears_on_statement_as, we highlight the field in red but don't display an error message.

@dmdj03

This comment has been minimized.

Show comment
Hide comment
@dmdj03

dmdj03 Sep 19, 2013

Are you thinking of a generic error message or reason-specific error messages?

dmdj03 commented Sep 19, 2013

Are you thinking of a generic error message or reason-specific error messages?

@kleinsch

This comment has been minimized.

Show comment
Hide comment
@kleinsch

kleinsch Sep 19, 2013

Contributor

Definitely reason-specific. We've had complaints that the form submission wouldn't complete, but users didn't know what to change to fix it.

We also probably need to figure out where to display these things. Top of the modal? Next to the field?

Contributor

kleinsch commented Sep 19, 2013

Definitely reason-specific. We've had complaints that the form submission wouldn't complete, but users didn't know what to change to fix it.

We also probably need to figure out where to display these things. Top of the modal? Next to the field?

@dmdj03

This comment has been minimized.

Show comment
Hide comment
@dmdj03

dmdj03 commented Sep 20, 2013

screen shot 2013-09-20 at 4 01 46 pm

@mjallday

This comment has been minimized.

Show comment
Hide comment
@mjallday

mjallday Dec 13, 2013

Contributor

@kyungmin how about this one?

Currently if I input an invalid value it just turns the box red but it doesn't display an error message. If we added something to explain what the error was this would be much more useful. The design of the modal has changed a little since we originally designed this issue but you can work with @dmdj03 to figure that part out.

image

Contributor

mjallday commented Dec 13, 2013

@kyungmin how about this one?

Currently if I input an invalid value it just turns the box red but it doesn't display an error message. If we added something to explain what the error was this would be much more useful. The design of the modal has changed a little since we originally designed this issue but you can work with @dmdj03 to figure that part out.

image

@kyungmin

This comment has been minimized.

Show comment
Hide comment
@kyungmin

kyungmin Dec 14, 2013

Contributor

@mjallday Sounds good. @dmdj03 Can you point me to a mock with error messages in the modal?

Contributor

kyungmin commented Dec 14, 2013

@mjallday Sounds good. @dmdj03 Can you point me to a mock with error messages in the modal?

@kyungmin

This comment has been minimized.

Show comment
Hide comment
@kyungmin

kyungmin Dec 16, 2013

Contributor

Also, how do you want the error messages to be displayed if there are multiple errors in the modal?

Contributor

kyungmin commented Dec 16, 2013

Also, how do you want the error messages to be displayed if there are multiple errors in the modal?

@dmdj03

This comment has been minimized.

Show comment
Hide comment
@dmdj03

dmdj03 Dec 16, 2013

@kyungmin: The error message is displayed after the text field
screen shot 2013-12-16 at 1 04 58 pm

dmdj03 commented Dec 16, 2013

@kyungmin: The error message is displayed after the text field
screen shot 2013-12-16 at 1 04 58 pm

@tarunc

This comment has been minimized.

Show comment
Hide comment
@tarunc

tarunc Dec 16, 2013

Contributor

@kyungmin Don't worry about the new modal styles in the image (unless, of course, you are working on that too). That is a separate issue. Just focus on showing the error

Contributor

tarunc commented Dec 16, 2013

@kyungmin Don't worry about the new modal styles in the image (unless, of course, you are working on that too). That is a separate issue. Just focus on showing the error

@kyungmin

This comment has been minimized.

Show comment
Hide comment
@kyungmin

kyungmin Dec 17, 2013

Contributor

Ok, here's my progress.
screen shot 2013-12-17 at 12 34 10 pm

Any suggestions on how to display more user-friendly error messages and fix the font type?

Contributor

kyungmin commented Dec 17, 2013

Ok, here's my progress.
screen shot 2013-12-17 at 12 34 10 pm

Any suggestions on how to display more user-friendly error messages and fix the font type?

@mjallday

This comment has been minimized.

Show comment
Hide comment
@mjallday

mjallday Dec 17, 2013

Contributor

@dmdj03 can you annotate the mock with the correct css classes (e.g. label1a)

Contributor

mjallday commented Dec 17, 2013

@dmdj03 can you annotate the mock with the correct css classes (e.g. label1a)

@dmdj03

This comment has been minimized.

Show comment
Hide comment
@dmdj03

dmdj03 commented Dec 18, 2013

screen shot 2013-12-17 at 4 07 08 pm

@kyungmin

This comment has been minimized.

Show comment
Hide comment
@kyungmin

kyungmin Dec 18, 2013

Contributor

Thanks! Here's a current state of the dialog. I'm missing spec on other elements (i.e., dialog, button, etc.).
Any suggestions on the next step? (more CSS changes, better error messages, or pull request?)

screen shot 2013-12-17 at 4 46 23 pm

Contributor

kyungmin commented Dec 18, 2013

Thanks! Here's a current state of the dialog. I'm missing spec on other elements (i.e., dialog, button, etc.).
Any suggestions on the next step? (more CSS changes, better error messages, or pull request?)

screen shot 2013-12-17 at 4 46 23 pm

@mjallday

This comment has been minimized.

Show comment
Hide comment
@mjallday

mjallday Dec 18, 2013

Contributor

@kyungmin don't worry about the rest of the modal. that's going to be all updated as part of a general site makeover. For this just focus on the error messages.

for the error messages; the message for the routing number field should be "1231" is not a valid routing number. The message prefix - "Invalid field [routing_number]" should not be shown.

Once you've got it looking correct and are ready for some code reviewing create a pull-request so we can take a look at the changes :)

Contributor

mjallday commented Dec 18, 2013

@kyungmin don't worry about the rest of the modal. that's going to be all updated as part of a general site makeover. For this just focus on the error messages.

for the error messages; the message for the routing number field should be "1231" is not a valid routing number. The message prefix - "Invalid field [routing_number]" should not be shown.

Once you've got it looking correct and are ready for some code reviewing create a pull-request so we can take a look at the changes :)

@kyungmin

This comment has been minimized.

Show comment
Hide comment
@kyungmin

kyungmin Dec 18, 2013

Contributor

I was getting an "Cannot read property 'stack' of undefined" error at lib-dev.js:9587, when I click on the submit button. Anyone have any clue why?

Contributor

kyungmin commented Dec 18, 2013

I was getting an "Cannot read property 'stack' of undefined" error at lib-dev.js:9587, when I click on the submit button. Anyone have any clue why?

@tarunc

This comment has been minimized.

Show comment
Hide comment
@tarunc

tarunc Dec 18, 2013

Contributor

@kyungmin Try pulling from master. I think of couple merges I made yesterday might have been causing the error you mentioned. They were fixed here.

Contributor

tarunc commented Dec 18, 2013

@kyungmin Try pulling from master. I think of couple merges I made yesterday might have been causing the error you mentioned. They were fixed here.

@kyungmin

This comment has been minimized.

Show comment
Hide comment
@kyungmin

kyungmin Dec 18, 2013

Contributor

@tarunc Yup, that fixed it. Thanks!

Contributor

kyungmin commented Dec 18, 2013

@tarunc Yup, that fixed it. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment