Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

How do you think about disabling the submit-button until the user has completed the form or the required fields?

I find similar questions here on ux.se and somebody answered that the user will think that the form is broken or not immediately realize whats going on.

I think hiding is not that good but a disabling (e.g. grayscale, opacity, ...) plus a short text in the button would improve usability because the user realise that he still has to fill out something.

Is there anybody with experience or examples besides the usual error-messages/validation after submitting?

share|improve this question
    
In the future, please don't phrase your questions as calls for opinions. As you can in the FAQ, such questions aren't allowed here. –  dnbrv Feb 28 '12 at 12:40
add comment

5 Answers

up vote 6 down vote accepted

You should show the submit button in an enabled state, unless you can easily explain next to it what would enable it, like an Alert saying "You can submit the form after filling in field1, field2, etc". This explanation would have to be directly next to the button and obvious.

You shouldn't rely on the state of the submit button alone to tell the user whether they are done with the required stuff or not. Firstly you can help users by auto-focussing on the first required field and then providing success/error messages as the user goes through the form (See Form control states in Bootstrap for an example).

One idea that I've not seen implemented yet, but may work for you depending on your application, is to let the user submit at any point. Instead of returning them back to the same form (with or without page reload) to fill in what they've missed out, show them only the required fields that they haven't filled in:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The idea here is not to make the user feel bad by informing them that they failed to fill in everything that was required. Take it in a stride and just ask them for what you still need as if you're clarifying this with a person. Keep in mind that you never benefit from the user feeling stupid for not doing something correctly, so just forgive them and ask again - they never need to know it's because they've done something wrong in the first place!

share|improve this answer
    
thanks to the hero! the idea of showing the missing fields is a nice solution that might work in combination with the usual form behavior. –  Robin Feb 28 '12 at 12:30
add comment

Either disable it until all required fields are filled (provided you clearly indicate which fields are marked) or allow the action and popup a message that they cannot submit the form yet, with a reason

share|improve this answer
    
Yeah, but the popup would be that error-message after submitting which i mentioned at the end of my question. I didn't want the user to have the feeling of safety by clicking "save" oder "send" and then disappoint him because an error occurred. May be I interpret too much i this, but this came up my mind I just wanted to see if there is some input here.... –  Robin Feb 28 '12 at 10:42
    
No, popup before submitting the form... So handle the click event with javascript and only if all preconditions are met then submit the form else show popup –  darryn.ten Feb 28 '12 at 10:44
    
which would be the same or am I wrong? For me, a form is submitted when a user press the send button. And then i didn't want a popup or error-message. i want to prevent that before he (is able to) press the button. –  Robin Feb 28 '12 at 10:58
    
The way you desribed it made it sound like you validate on the server side. What I am suggesting is catching the click event and only submitting the form once everything is up to scratch, vs allowing the form to get posted and having the user wait for the next page to load. –  darryn.ten Feb 28 '12 at 11:02
    
Here are some more infos. I have a registration form with about 5 fields (name, adress etc.) and all of them are required what i tell them in a short text. May be you know some site with terms of service where you can't continue until you checked the "i read the terms" box...i want to adopt something similar for my form. –  Robin Feb 28 '12 at 11:12
show 2 more comments

When you disable the submit button instead of validating the data on blur or on form submission (in case when the submit button isn't disabled), you must inform the user clearly about the required fields. Otherwise, you will cause them frustration.

share|improve this answer
add comment

This post does not cite any references or sources. Please help improve this post by adding citations to reliable sources. Unsourced material may be challenged and removed.

You should also be aware that some users don't have JavaScript enabled, so the form would just be broken for them. It's generally good practice to make forms usable (although less "nice") when JavaScript isn't available.

share|improve this answer
    
But Brendan Long if user has disabled javascript then there is no need to disable the button; than you can't think of ux, and that's why server side validation is important if validation is concerned. –  Samiullah Feb 28 '12 at 17:06
    
@Samiullah - I guess you could disable the button with JavaScript, but you might get an undesired flicker before it happens. –  Brendan Long Feb 28 '12 at 17:16
    
I should check if javascript is activated, if not I'll do a serverside validation :) But in the last 2 Years there were about 5-10 out of about 8 mill. unique views with deactivated javascript. if I look at the cost-benefit ratio ... –  Robin Mar 1 '12 at 8:45
add comment

An ideal approach would be to do the following:

  1. Mark required fields clearly with text and styling.

  2. As they are filled in, change the styling to indicate they are complete (ie: change their background from red to blue, add a green checkmark, etc.)

  3. Disable the submit button (this is good UX, following Poka-yoke principles), but add text to it saying something like "You Still Need to Fill Out X Fields".

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.