HTML and CSS Reference
In-Depth Information
The validation algorithm begins by converting the text field value to a number.
The if…else statement tests if the value entered in a text field is valid. If false, an error
message is displayed, the text field is cleared, and the insertion point is placed back in the
text field. This prevents the user from continuing until the user enters valid data in the text
field. If the value entered in the text field is valid (a true condition), the next text field is
examined until all text fields are validated. The validation process is shown in the flowchart
in Figure 10-16.
Convert Sales
Amount
True
False
Is Amount
Valid?
Convert
DownPayment
Amount
Display
Message
statements
executed if
Sales Amount
is valid
Clear
Text Field
statements
executed if
Sales Amount
is invalid
True
False
Is Amount
Valid?
Calculate Loan
Amount
Display
Message
Set Focus to
Sales Amount
Text Field
statements
executed if
DownPayment
Amount is valid
Assign Loan
Amount to
Text Field
Clear
Text Field
statements executed
if DownPayment
Amount is invalid
Set Focus to
DownPayment
Text Field
Figure 10-16
This validation design is necessary because of the event-driven nature of JavaScript.
When a user triggers an event that calls a function, processing stays within that function
until all statements execute. Because all the statements execute in a function, the form
validation routine uses nested if…else statements to ensure each text field is validated
correctly. By nesting if…else statements, you can place an if…else statement inside
another, as shown in Figure 10-17.
