Javascript for Data Entry Validation

Text Entry Fields

Email: (Text box)		TODO: Because there is a prompt in the field, JavaScript clear it when the user clicks on it.
Password:	[Medium][Strong]	HTML <input type="password" converts what users type to dots. But it's nice to provide a way for users to see their plain text. TODO: It's helpful to calculate a strength indicator. But provide a help icon so newbies can get information about it.
Text area:	sample	Text areas can contain a maximum of 4,068 bytes (4KB). Javascript onKeypress prevents user entry of special characters (such as quotes, slash, equal, and & ampersand characters) which can be used for SQL injection attacks.
US Social Security/ or Canadian National Insurance Number:		The first of 3 boxes allows for all numbers to be pasted on the field. Before saving to the database, dashes in the standard US format of "123-45-6789" is removed. This field is sensitive information because it can be used as the basis for identity theft. So to minimize snooping perhaps the value in this field can TODO: disappear after a certain period of time and made to reappear again upon mouse-over.

Country Selection

Because there are a lot of countries, so it may be easier for visitors to

1. have them segmented into geographical regions (continents).

2. select on a region of a world map before revealing a list of countries (as the BBC example here).

Country:

Americas: Select One Afghanistan Albania Algeria Andorra Angola Anguilla Antigua and Barbuda Argentina Armenia Aruba Australia Austria Azerbaijan Bahamas Bahrain Bangladesh Barbados Belarus Belgium Belize Benin Bermuda Bhutan Bolivia Bosnia and Herzegovina Botswana Brazil Brunei Bulgaria Burkina Faso Burundi Cambodia Cameroon Canada Canary Island Cape Verde Central African Republic Chad Chile China Colombia Comoros Congo Costa Rica Croatia Cuba Curacao Czech Republic Democratic Republic of Congo Denmark Djibouti Dominica Dominican Republic Ecuador Egypt El Salvador Eq. Guinea Eritrea Estonia Ethiopia Finland France G.Bissau Gabon Gambia Georgia Germany Ghana Gibraltar Grand Cayman Greece Greenland Grenada Guadeloupe Guatemala Guinea Guyana Haiti Honduras Hong Kong Hungary Iceland India Indonesia Iran Iraq Ireland Israel Italy Ivory Coast Jamaica Japan Jordan Kazakhstan Kenya Kuwait Kyrgyzstan Laos Latvia Lebanon Lesotho Liberia Libya Liechtenstein Lithuania Luxembourg Macedonia Madagascar Madeira Malawi Malaysia Maldives Mali Malta Martinique Mauritania Mauritius Mayotte Mexico Moldova Monaco Montserrat Morocco Mozambique Namibia Nepal Netherlands Netherlands Antilles New Zealand Nicaragua Niger Nigeria Northern Africa Norway Oman Pakistan Palau Palestine Panama Papua New Guinea Paraguay Peru Philippines Poland Portugal Puerto Rico Qatar Reunion Romania Russia Rwanda S.Tome and Prinicipe San Marino Saudi Arabia Senegal Serbia and Montenegro Seychelles Sierra-Leone Singapore Sint Maarten Slovak Republic Slovenia Somalia South Africa South Korea Spain Sri Lanka St. Kitts and Nevis St. Lucia St. Vincent and The Grenadines Sudan Suriname Swaziland Sweden Switzerland Syria Taiwan Tanzania Thailand Togo Trinidad y Tobago Tunisia Turkey Turkmenistan Turks and Caicos Islands UAE Uganda Ukraine United Kingdom United States of America Uruguay Uzbekistan Vatican City State Venezuela Vietnam Virgin Islands Yemen Zambia Zimbabwe Other

1. Many website have "United States of America" as the top of the list because it's the most common. and thus convenient if that is the choice for the majority of your visitors/members. But some see this as imperialistic. So it's best to have the US SELECTED as the default within an alphabetic list. See Museums in Countries There are controversial names for some countries. Different languages have different names for countries. The UN and Canada uses both English and French names.

2. TODO: Displaying the phone country code is a good confirmation of the country name selected.

3. TODO: Some websites include the language code in the country selection.

4. TODO: The currency code and currency name is associated with each country.

Geographic Fields

Generally, the structure is: Continent > Country > Region > State > City > Zip/Postal Code

Check box:	All:	CHECKED is specified to pre-select a checkbox.
Radio buttons:	Yes No Other (please specify)	CHECKED is specified to pre-select a radio option. The name of each radio button group must be all the same. The value automatically begin at zero for the first button. When user selects Other, attention is drawn to the Text area
Zip/Postal code: (Text box)	12345-1234	Javascript onKeypress code is specified to allow only a dash (ASCII 45) and numbers (ASCII 48-57). Tabbing away from this field causes invokes a function which looks up its ranges of zip codes in the USA and automatically selects the state. Canadian Postal codes are 6 positions like "S3A6V5". The first 3 positions is called the Forward Sortation Area, with the first letter sequenced from East to West. The last 3 is the Local Delivery Unit. UK PostCodes contain a space between "CB4 1AS".
US State/ Province:	Please Select Armed Forces Americas Armed Forces EMEA+Canada Armed Forces Pacific Alaska Alabama Alberta Arkansas American Samoa Arizona British Columbia California Colorada Conneticut District of Colombia Delaware Florida Federated States Micronesia Georgia Guam Hawaii Iowa Idaho Illinois Indiana Kansas Kentucky Louisiana Manitoba Massachusetts Maryland Maine Michigan Minnesota Missouri Mississippi Montana New Brunswick North Carolina North Dakota Nebraska New Hampshire New Jersey New Mexico Nevada New York Newfoundland and Labrador Northwest Territories Nova Scotia Nunavut Ohio Oklahoma Ontario Oregon Pennsylvania Prince Edward Island Puerto Rico Quebec Rhode Island Saskatchewan South Carolina South Dakota Tennessee Texas Utah Virgin Islands Vermont Virginia Washington Wisconsin West Virginia Wyoming Yukon Other... Mexico: Aguascalientes Aguascalientes Baja California Norte Mexicali Baja California Sur La Paz Chihuahua Chihuahua Colima Colima Campeche Campeche Coahuila Saltillo Chiapas Tuxtla Gutiérrez Distrito Federal Durango Durango Guerrero Chilpancingo de los Bravo Guanajuato Guanajuato Hidalgo Pachuca de Soto Jalisco Guadalajara Michoacan Morelia Morelos Cuernavaca Nayarit Tepic Nuevo Leon Monterrey Oaxaca Oaxaca de Juárez Puebla Puebla de Zaragoza Quintana Roo Chetumal Queretaro Santiago de Querétaro Sinaloa Culiacán San Luis Potosi San Luis Potosi Sonora Hermosillo Tabasco Villahermosa Tlaxcala Tlaxcala de Xicoténcatl Tamaulipas Ciudad Victoria Veracruz Xalapa Yucatan Mérida Zacatecas Zacatecas	1. Since each country has a different set of states, this needs to appear/disappear/change depending on user choice of country. 2. Providing both a pull-down and entry for the same data provides an alternative for users. So JavaScript to make selection in one field result in selection in the other field provides confirmation of the user's choice. But this may confuse some people who think they have to do both. 3. TODO: Here is a good place to pre-populate the state based on known geolocations of the user's IP address, which is not always reliable, but reliable enough at the state level. 4. The state can be pre-selected based on the zip code or 5. TODO: Here is a good place to use an autocomplete control rather than a pull down to select from a named list. But avoid a round-trip to the server by providing it in the JavaScript pre-loaded. 6. The text input field and "Other..." at the end of the drop-down for future flexibility. Included in the list are Canadian Provinces, US Military, and US Insula Areas (such as American Samoa, Guam, Puerto Rico, and Virgin Islands) are included. Abbreviations of states in Mexico overlap state codes for the US and Canada.

Telephone Entry

Phone:

TODO: Different countries have different area codes and formats.

US Image Map

Mouse over a state's postal abbreviation for its name, then click for more information about that state.



The District of Columbia (DC) is not considered a state, so there should at least be 51 entries in the state list.

Additionally, territories of the US (such as Puerto Rico, Guam, etc.) all have a state code as well.

Sorting by state code vs. by state name puts Kansas below Kentucky, Maryland below Massachusettes, Michigan below Minnesota.

Links in this list are to state departments of education.

1. AL - Alabama
2. AK - Alaska
3. AZ - Arizona
4. AR - Arkansas
5. CA - California
6. CO - Colorado
7. CT - Connecticut
8. DE - Delaware
9. DC - District of Columbia
10. FL - Florida
11. GA - Georgia
12. HI - Hawaii
13. ID - Idaho
14. IL - Illinois
15. IA - Iowa
16. IN - Indiana
17. KY - Kentucky
18. KS - Kansas
19. LA - Louisiana
20. ME - Maine
21. MA - Massachusetts
22. MD - Maryland
23. MN - Minnesota
24. MI - Michigan
25. MO - Missouri
26. MS - Mississippi
27. MT - Montana
28. NE - Nebraska
29. NV - Nevada
30. NH - New Hampshire
31. NJ - New Jersey
32. NM - New Mexico
33. NY - New York
34. NC - North Carolina
35. ND - North Dakota
36. OH - Ohio
37. OK - Oklahoma
38. OR - Oregon
39. PA - Pennsylvania
40. RI - Rhode Island
41. SC - South Carolina
42. SD - South Dakota
43. TN - Tennessee
44. TX - Texas
45. UT - Utah
46. VT - Vermont
47. VA - Virginia
48. WA - Washington
49. WV - West Virginia
50. WI - Wisconsin
51. WY - Wyoming

Money Fields

Currency (Text box)	USD	CSS Style="text-align: right" is used for IE browsers. Javascript onKeypress code is specified to prevent non-numeric characters from being entered. The currency symbol, decimal point, and number of decimals need to be localized to the user The Euro currency symbol can be displayed with a graphic or a Unicode HTML code.
Card Type:	MasterCard Visa American Express Diners Club Discover enRoute JCB	Making users select this does provide an extra audit of user intent. But it's not absolutely necessary that the user selects this because the type of card can be derived from the beginning digits of the card number. Not every ecommerce merchant service handles all these cards. PayPal (Ebay), Amazon, and Google Checkout take the major cards, and require authentication, which many now prefer over entering credit card info to an unfamiliar (potentially fraudulant) website.
Credit Card: (Text box)		Javascript onKeypress code is specified to allow only numbers and spaces (ASCII 32) to be entered because that's how they are shown on the card. Behind the scenes, spaces are removed by referring to this field with a filtering function. See Programming edits for credit cards.
Expiration: (Drop-down option selections)	1 2 3 4 5 6 7 8 9 10 11 12 /	These fields for credit card processing, are generated using in-line Javascript that begins from the current year. No future maintenance is required on this script! Both width="4" is specified for Netscape and style="WIDTH: 265px" for IE browsers. SELECTED is specified to pre-select the middle option for user convenience.