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?
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.
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!
<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.
You might be interested in this
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.