Client-side data validation - Tom Kleen



HTML Data Validation, jQueryClient-side data validationLet's return to our loan payment example. We will still use plain JavaScript to compute the loan payment. However, we will add HTML data validation, some CSS, and some jQuery.HTMLCreate a form element with the following: Input: [15 points] Create labeled input boxes for (1) Loan Amount, (2) Annual Interest Rate, and (3) Years. Each box should be 200px wide. Use the title attribute to provide error messages. Use the properties of a form's input element to set the following restrictions. Note that these attributes are used by HTML5's data validation:Loan Amount: required, type must be a number between 1 (min) and 500,000 (max), including both. Placeholder: Loan Amount. Error message: Enter the loan amount between 1 and 500,000.Annual Interest Rate: required, type must be a number between 0.00 (min)and 20.00 (max), including both. Placeholder: Annual Rate. Error message: Enter an annual rate between 0.00 and 20.00. User can enter a number with up to 2 decimal places.Number of Years: required, type must be a whole number between 1 (min) and 40 (max) including both. Placeholder: Number of Years. Error message: Enter a number of years between 1 and 40.[3] Create a button with the label "Compute Payment". When it is clicked, compute the payment.[2] Create an <output> placeholder for the payment amount.[5] Write CSS to make all of your HTML look nice (sizes, alignment, colors, etc.).You must write code to:[3] Use CSS to display all text fields that have the attribute required with a red 2-pixel solid border. Also make them the same height and width.[3] Use jQuery: When the loan amount or annual interest rate or years text box gets the focus, set its background color to a shade of yellow to help the user identify where he is on the page.[3] When the loan amount or annual interest rate or years text box loses the focus, set its background color back to white.[6] When the user clicks on the Compute Payment button, pick off the contents of the three text boxes and calculate the payment.[3] If all of the numbers are valid (which they should be), compute the monthly payment. The formula requires the rate per period (in our case, a period is a month). Remember that the rate must be divided by 100 to make it a percent and then divided by 12 to get the monthly rate. So if the user types in 4.8 (for 4.8% annual rate), divide it by 100 to get 0.048, and then divide by 12 to get 0.004. This is the rate per period required by the formula.The formula requires the number of payment periods. Since we are doing monthly payments, we must multiply the years by 12 to get the number of payments. This is the number required by the formula.The formula for finding the payment on a loan can be found online.Your screen should look something like this when invalid values are entered. Test your program with $50,000, 12%, 30 years. The answer should be $514.31.jQuery used:Events:clickfocusblurFunctions/methods:parseFloatparseIntvalisNaNcssalert/console.log/F12toFixed ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download