270: VALIDATION

Form Validation

0. Come to class as there may be corrections, changes and additions.   Significant late penalty per day.
1. Use Notepad++ to create A page.
2. Follow these directions to SUBMIT a folder called "FORM" to the D2L dropbox., NOT on cisprod.
3. Comment! (guidelines)
4. VALIDATE your   HTML   and your   CSS

Video
Forms and Validation
html & css   --   javascript

form form form form


Create a form with inputs & selections as follows:

First Name: Betty [Letters only, first letter capitalized.] Last Name: Betters [Letters only, first letter capitalized.] Challenge: If first letter of name not capitalized, CAPITALIZE the first letter! (onblur, charAt, substr) Telephone: 123-456-7890 [length 12, digits and hyphen separator only] Zip: 12345 [length 10, digits only] 12345-7890 [length 10, digits and hyphen separator only] ? How do you reject 12345-22 ? E-Mail: type="email" SS#: 123-45-6789 [length 11, digits and hyphen separator only] Income: 0-999999 [check for number, range ] <input type=" "   ==>> text, password, email, tel, checkbox, radio, submit id=" " name=" " size=" " maxlength=" " title=" " placeholder=" what the user sees" pattern=" "   ==>> regex quick start   regex overview   pattern reference! tabindex=" " required /> BirthDate: ONE Dropdown (Year): 1990-2000. Check? None select option ========================================================================== Tax Rate Calculated from Income: 1. 10% of amount between $0 - 20,000.00 2. 20% of amount between $20,000.01 - 50,000.00 + 2,000(from line 1) 3. 25% of amount between $50,000.01 - 100,000.00 + 6,000(from line 2) + 2,000(from line 1) 4. 30% of amount between $100,000.01 - 500,000.00 + 12,500(from line 3) + 6,000(from line 2) + 2,000(from line 1) If income is over $500,000 = 1% flat rate on all income. :) The 1% NOTE: .toFixed(2) ==> forces 2 decimal places Explained: Income is your "Gross Income". To calculate "Net Income" (take home pay): Tax is subtracted from income. Income: $500.00 Tax: $50.00 Net Income: $450.00 (see more examples at end of page)
Validate form before calculating and submitting!!! Do not allow bad data onto the form. Report any error and allow the user to correct that input. Put focus where error was detected. DO NOT clear entire form on error! Use pseudo-classes to style input boxes :valid :invalid (NOTE these will throw css validation errors - ok) Do not calculate until all data fields are valid. Note that calculation is separate from submission but should occur at the same time. How? if ( $(formId).checkValidity() ) { code to execute if all fields valid ... }
A checkbox will determine if tax rules are displayed (see example). if ( $(id).checked) { code to execute if checked }
'Clear' resets all fields to blank (default in drop down). 'Fill' fills all fields to valid values (default in drop down).

USE THIS for form: <form id="someId" target="_blank" class="someClass" action="http://www.example.com/review.php" method="get">

Documentation Guidelines                       Validation:  HTML  ·  CSS

Validate and document HTML ! Explain(cryptic stuff)

Validate CSS and use CSS organizaton as we talked about. Style so form fields float with appropriate margins!

JS: Use $ function. Create "Clear()", "Fill()" and "Calculate()" functions.

Document!


EXAMPLES:

Income: $500.00 Tax: $ 50.00 Net Income: $450.00 ------------------------------------------ Income: $10,000.00 Tax: $ 1,000.00 (10% of 10,000) Net Income: $ 9,000.00 --------------------------------------------- Income: $20,000.00 Tax: $ 2,000.00 (10% of 20,000) Net Income: $18,000.00 ------------------------------------------- Income: $30,000.00 Tax: $ 4,000.00 (10% of 20,000 plus 20% of 10,000) Net Income: $26,000.00 --------------------------------------------- Income: $40,000.00 Tax: $ 6,000.00 (10% of 20,000 plus 20% of 20,000) Net Income: $34,000.00 --------------------------------------------- Income: $50,000.00 Tax: $ 8,000.00 (10% of 20,000 plus 20% of 30,000) Net Income: $42,000.00 --------------------------------------------- Income: $60,000.00 Tax: $10,500.00 (10% of 20,000 plus 20% of 30,000 plus 25% of 10,000) Net Income: $49,500.00