Jump to content

Question on how to make button disabled until form is completed filled out


Recommended Posts

Hello all,


I want to use this button design: http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_demo_buttons


I'm making a web page that is essentially a form, with a submit button at the bottom.


However, I want this button to either be hidden until all form entries are filled out, or the button disabled from being clicked on until all form entries are filled out.


I prefer the latter portion, where the button is disabled (link shows the disabled button above).


Can someone assist? Is this something I have to implement with JavaScript? I was thinking of an if statement that goes through every form entry or a loop that iterates through every form entry and if it is filled out, it will display the clickable submit button.



Link to comment
Share on other sites

Using javascript for this is problematic in that it would not be very or even practical for the process as you describe it. The norm approch for such things is simply to use the click event listener for the button to fire a script that tests the fields. The way you desribe the requirement, the scripting required would need to be looking at every keystroke. It also has the problem that the button could be enabled and then they go back and remove the content from one of the inputs, unless as part of the enabling of the button you disable the inputs or make them read only. So you likely end up with usability and reliability issues; and possibly even an accessibility problem.


While using the required attribute is the better approach; it also has a problem in that only one field gets reported as empty for a button click, so if the user leaves several blank they might feel they are being mistreated and just leave the site.


The problem is the design. Having a dependency like that for the whole form is probably better handled on the server side so you send back a response with all problem inputs indicated after validating on the server.

Link to comment
Share on other sites

You wouldn't disable the button



I would not disable, and you would not disable but the OP is looking to disable; which is why I pointed out the design problem with that approach. I rarely bother with client side validation other than using the HTML input attributes, because you still have to sanitize and validate on the server in any case. I avoid Javascript whenever I can.

Link to comment
Share on other sites

That is true, you really need to assign the form.onsubmit event to a handler function.


The whole idea of Javascript validation is of course to reduce server loading and to provide quicker response times for the user. In addition to validation the use of AJAX has reduced the need for complete page reloads.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...