If there??™s an error showing on the form you do indeed know that. However, it??™s
something to be careful about; you don??™t want the formto remain unsubmittable if something
goes wrong with the JavaScript checking or if JavaScript isn??™t available. First, then, you need a
function that can enable or disable the submit button of the form??”if there are errors showing,
disable the button; if there are no errors, enable it. This is quite a simple function that doesn??™t
depend on the current state of the button; if the button is already enabled, the function
enables it again with no ill effects.
CHAPTER 7 n FORM VALIDATION AND JAVASCRIPT 157
checkForErrors: function() {
// Look for span.error in the page
var spans = document.getElementsByTagName('span');
for (var i=0; i
// does this span have class=error?
if (spans[i].className.match(/\berror\b/)) {
// disable the submit button and exit
document.getElementById("submitButton").disabled = true;
return;
}
}
// there were no span.error elements, so enable the submit button
document.getElementById("submitButton").disabled = false;
}
To make the function??™s job easier, I also added an ID to the form??™s submit button.
The checkForErrors() function then needs to be called from a couple of different places.
Whenever a field is checked (in the checkField() function), call checkForErrors(). It would
be possible to be clever about this??”call checkForErrors() only if the field??™s error status has
changed from OK to error or the other way around??”but it??™s often easier to understand if it??™s
just called unconditionally, as you do here.
Pages:
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232