This example shows how to implement basic JavaScript form validation, with a four-step process:
submit
event as the primary event
trigger, so the user's natural browsing behavior and workflow
isn't unduly interrupted
alert
dialog to inform the user that an input
error has occurred, providing explicit notification which is
helpful for screenreader users
submit, correct, submit (etc)may then require little or no manual navigation at all, since a form can be submitted by pressing Enter from a focused
text
field
<label>
with its for
attribute
pointing to the field, and should preferably have an inner
<strong>
around the actual text, to provide
semantic emphasis compared with ordinary labels
Try entering a value into one of the fields but leave the other one empty, or enter a value with inappropriate special characters, and then submit the form. If either value is missing or invalid, the validation process will occur:
The JavaScript code for this example can be found in: JS_F_A1-A3-A4.js
The CSS for this example can be found in: JS_F_A1-A3-A4.css