Feedback on this form-validation

Feedback & Problem Solving
#1

Hi,

Could someone please give me some thoughts/opinion/feedback on this concept for form validation?

The animated gif below shows me testing it by clicking on the Send button without filling in any of the fields beforehand.

Please let me know if this animated gif mockup doesn’t play.
form-validation

Many thanks

#2

Are you asking about the phrasing you’ve used, or about something more design-like?

#3

I was wondering if the placement of error messages / the fact that the field-labels turn into the corresponding error messages is something that would be ill-advised…but I am indeed also welcoming thoughts on the wording used for the error messages too.

1 Like
#4

As a designer, I like this approach. But here are a few of the trickier issues I’ve had to work with in form design that might change your pattern.

  1. Filled fields

Your example shows 3 empty fields. But that’s an edge case. You’re more likely to be generating error messages for filled fields (e.g. user enters an incorrect email address). Will this design pattern work as well when the fields already have text entered?

  1. Long forms

Your animation shows the submit button and error fields all nicely presented together. But real forms rarely work like this. What if there are 10 fields and I fill in the first and tenth wrong? I scroll down to the Send button and press it. How are you going to show me that fields 1 and 10 are wrong? Scroll back up to the top of the page and show a ‘There a 2 errors’ message? Show this message by the button? And I won’t see the animation because it’ll be off the page…

  1. Javascript disabled

These effects where 1 message is replaced by another with a nice animation rely on Javascript. What if I have Javascript disabled? What if I’m using a screen reader? Will your error messages ‘fall back’ gracefully so that I can still use the form?

Fun and games! :slight_smile:

3 Likes
#5

Hey Michael,

Thank you for getting involved. Great points too!

Here’s some of my thinking mapped out via your points:

  1. Filled Fields
    Currently, it works if the user has entered an invalid email address – I should’ve chosen to showcase that in the gif.

  2. Long forms
    Yep, you win here. At the very least, the Send button ought to be disabled or rendered differently until form validation proves successful – Please share any other ideas, if you have any.

As for not seeing the animation because it’ll be off the page…This is more or less the problem I was hoping the icons would help solve. Mind you, this idea was just for this particular 3-field form. But still, thoughts please.

  1. Javascript Disabled
    This form was just an instance of Wordpress’s Contact Form 7 that I applied my CSS skills to – No javascript was added or modified. None of the labels actually get replaced, they are still there throughout…an “::after” pseudo-element with the corresponding error message set as its “Content” just animates in (using CSS transitions) on top of the label as soon as Contact Form 7 does its validation thing. – Should you ever choose to be inspired by this idea, I want props! :wink: Jokes.

But as for screenreaders and graceful degradation…yep, as with the original field labels, the original error messages that Contact Form 7 generates are still there – just hidden via CSS.

I will confess to one flaw that I was aware of when I made this thread: The form validates AS the user fills it in…instead of waiting till the user clicks submit…which is something NNG dislikes. This is something that I seem to be unable to hack out of Contact Form 7.

Anyway, thanks again. Any additional comments or thoughts would be much appreciated.

2 Likes
#6

I don’t think so. It would be ill-advised if the errors masked the field labels so that users didn’t know what to input, but in this case they don’t do that, they just reword.

2 Likes
#7

Cool, that was my thinking, but I wasn’t sure as there’s seemingly always a range of opinions on the same matter. And as no one else has mentioned any quarrels with this particular thing, I’ll settle for it being okay! Thank you :slight_smile:

2 Likes
#8

I’ve been working on a similar validation myself. This is nice. I like the field label changing to the error message. For long forms we have the same problem of having to have the user scroll back up to see the error message, so we are thinking of a combination of the label changing, but also an error box above the submit, but it still feels a bit clunky. Another problem we ran into, was the field labels changing to red text wasn’t legible on some forms due to the background being different throughout the application, so we changed to the label error message having a red background with white text.

2 Likes
#9

Hey Tim,

Thanks for getting involved, and thanks for the compliments too, glad you like the concept :slight_smile:

Well, I was thinking about putting an error message next to the submit button, seeing as there’s nought but plenty of empty space next to the button – Which reminds me: I need an error state for the actual submit button itself.

Good idea about a background color for the error messages – It’s coincidentally what I did here…The error messages don’t actually replace the labels, they just slide in on top of the labels…for that to work, I had to give the error messages the same background color as that of the form…But the idea you mentioned would work just as well for the purposes that I just explained too.

2 Likes