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

[supitstom]

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.

 

Thanks!

[davej]

Javascript is the usual approach for this however HTML5 has a "required" attribute that can also be used...

 

http://www.w3schools.com/tags/att_input_required.asp

[COBOLdinosaur]

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.

[davej]

You wouldn't disable the button. The button would call a routine that would prevent the submittal unless the form passed all specified requirements.

[COBOLdinosaur]

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.

[dsonesuk]

Also if any inputs used that are not required, (after required inputs are filled) that has focus, and the enter button is pressed will bypass disabled submit button and submit anyway.

[davej]

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.