Would anyone care to post your favorite script for disabling the submit button on a form when there are input errors, and reenabling when all errors are resolved? I’d be curious what the different approaches are to this. I looked through my various SitePoint javascript books and surprisingly didn’t find an answer to this scenario specifically.
The behavior I’m trying to achieve (most efficiently) is having a form start out with the submit button enabled, but if there is a validation error, such as a required field being left blank on blur, the submit button is disabled. It’s easy then to re-enable it when the user fills in that field, but harder to get the script to check and see if there are any other lingering errors before going ahead and enabling it.
My natural inclination would be to just keep a count of errors that increments and decrements when errors occur and are resolved. Then the script would check to see that the error count is 0 before re-enabling the submit button. It seemed easy, but I think I’m getting mixed up somewhere in conflicts of variable scope, and it’s not turning out right.
A google search rendered an example where someone was using a string variable to store errors, concatenating and replacing data to the string as errors were logged/resolved. Any other methods out there as I try to implement a solution?
Since a significant fraction of people filling out the form will not have JavaScript you will need to perform the same validations after the form is submitted to the server anyway.
That means that there isn’t much point in enabling and disabling the submit button from JavaScript since if there are errors in the form when it is submitted the server side processing will detect the errors and redisplay the form anyway.
create a validation function that returns true or false depending on whether the form validates. Use that function as an event handler for the submit event on the form element. This works because when the user tries to submit the form, your function will get executed. If the function returns false, the browser will abort form submission.
felgalls point still stands though- you need to validate on the server too. The javascript validation is just an additional, optional convenience for the user which offers immediate feedback, instead of waiting for the page to reload.
I do have comprehensive PHP validation on the back end. Javascript penetration by some estimates is 90-95%, and js validation is a fairly popular “progressive enhancement” that I myself find helpful. So I’m surprised you would say there isn’t much point in it, felgall. The point of js validation is to give more helpful feedback to the user, as one would in a desktop app. Avoiding a page refresh makes form errors that much less disorienting.
Thanks for your response, crmalibu, but rather than use a function as a submit event handler, I’m asking how to best disable and re-enable the submit button before the submit event, so that I can provide visual feedback that the form is not ready to be submitted if there are still errors. Obviously this would need to be a function that runs on blur or change events for the various form elements, but I’m specifically asking if anyone has an example of a function like this that they find useful, or some advice on how to approach making one. Thanks for any replies!
The usual way of avoiding the page refresh is to attach the JavaScript validation TO the form so that it runs WHEN the submit button is pressed and prevents the form being submitted if there are errors. You need the submit button available when doing things that way in order to run the JavaScript validation and so disabling it until the form passes validation means that you can’t run the validation properly when the person finishes filling out the form. While you could attach individual field validations to the individual fields in the form it is somewhat difficult to run validations that involve multiple fields prior to the person indicating that they think they have filled them all out by pressing Submit.
<form onsubmit=“return jsvalidation()”> where the jsvalidation function returns false if there are validation errors.
running valudation onblur and onchange cannot do all of the validations that a form needs since the person need not go to every field when filling out the form and in some cases validation involves more than one field at a time.
I think it takes a pretty reasonable approach to how a field is only validated when it loses focus, and had user input. But after a failed validation it’s validated aggressively. Seems like a good way to go about it without the user feeling nagged or overwhelmed with error messages. It’s a heavyweight solution, but I think it’s pretty nice. But if you really want to build your own, at least maybe this gives some ideas.
You could improve on that even. During the eager validation mode on an input, I think it would have been better had they also polled for changes occasionally, instead of just using key events and blur. Reason being, you might use the browser context menu to paste, which doesn’t fire any key event. Then you have completely valid input and a stale error message.