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?

  • 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
    Commented Feb 28, 2012 at 12:40

5 Answers 5


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:


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!

  • 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
    Commented Feb 28, 2012 at 12:30
  • The method I've found to be the best is to leave the "submit" or "next" buttons enabled, always. This works great in conjunction with live validation, if the user has not completed all fields or has an invalid field (which they shouldn't if your live validation is setup well) then clicking "next" or "submit" can then trigger the warning messages for the relevant fields.
    – darcher
    Commented Mar 5, 2015 at 17:35

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".


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

  • 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
    Commented Feb 28, 2012 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
    Commented Feb 28, 2012 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
    Commented Feb 28, 2012 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
    Commented Feb 28, 2012 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
    Commented Feb 28, 2012 at 11:12

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.


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.

  • 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
    Commented Feb 28, 2012 at 17:06
  • @Samiullah - I guess you could disable the button with JavaScript, but you might get an undesired flicker before it happens. Commented Feb 28, 2012 at 17:16
  • 1
    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
    Commented Mar 1, 2012 at 8:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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