Javascript for Data Entry Validation

Authentication Fields

A help icon enables users to get information about a field.

Heading	Fields	Help information
Email: (Text box)	Save on device	The "Save on device" checkbox is often called "Remember me" on various other web pages. TODO: Because there is a prompt in the field, JavaScript clear it when the user clicks on it.
Password:	Show Password Forgot password?	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. It's helpful to calculate a strength indicator. Dynamic text is not translated. So text colors is changed automatically from red to yellow to green.
Sign-in/Sign-on Log-in/Log-on	Sign In / Cancel	-

Geographic Selection

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

Country within Region Selection

There are over 200 countries in the world. So rather than make users scroll down a long list, make it easier by variouis means:

• Segment the globe into geographical regions (continents) from a list or a world map before revealing a list of countries (as the BBC example here).
• Use the IP address of the request to look up the country of the user's browser.

1. Region:	North America Carribean Central America South America Western and Northern Europe Eastern Europe Middle East Africa Asia	Map here. After a region is selected, countries specific to that region appears in place of the region list.
2. Country:	North America: Select One Canada United States of America Carribean: Anguilla Antigua and Barbuda Aruba Bahamas Barbados Bermuda Cuba Curacao Dominica Dominican Republic Grand Cayman Grenada Guadeloupe Haiti Jamaica Maldives Martinique Mauritius Montserrat Netherlands Antilles Puerto Rico S.Tome and Prinicipe Saint Maarten St. Kitts and Nevis St. Lucia St. Vincent and The Grenadines Trinidad y Tobago Turks and Caicos Islands Virgin Islands Central America: Select One Belize Costa Rica El Salvador Guatemala Honduras Mexico Nicaragua Panama South America: Select One Argentina Bolivia Brazil Chile Colombia Ecuador Guyana Paraguay Peru Suriname Uraguay Venezuela Western and Northern Europe: Select One Austria Belgium Denmark Finland France Germany Gibraltar Greece Greenland (Denmark) Iceland Ireland Italy Liechtenstein Luxembourg Malta Monaco Netherlands Norway Portugal San Marino Spain Sweden Switzerland Vatican City State United Kingdom Eastern Europe: Albania Andorra Armenia Afghanistan Azerbaijan Bahrain Belarus Bulgaria Bosnia and Herzegovina Croatia Czech Republic Estonia Georgia Hungary Kazakhstan Kyrgyzstan Latvia Lithuania Macedonia Moldova Poland Romania Russia Serbia and Montenegro Slovak Republic Slovenia Turkmenistan Ukraine Uzbekistan Middle East: Select One Iran Iraq Israel Jordan Kuwait Lebanon Oman Pakistan Palestine Qatar Reunion Saudi Arabia Syria Turkey UAE Yemen Africa: Select One Algeria Angola Benin Botswana Burkina Faso Burundi Cameroon Canary Islands Cape Verde Central African Republic Chad Comoros Congo Democratic Republic of Congo Djibouti Equatorial Guinea Egypt Eritrea Ethiopia Guinea Guinea Bissau Gabon Gambia Ghana Guinea Ivory Coast Kenya Lesotho Liberia Libya Madagascar Madeira (Portugal) Malawi Mali Mauritania Mayotte (France) Morocco Mozambique Namibia Niger Nigeria Northern Africa Rwanda Senegal Seychelles Sierra-Leone Somalia South Africa Sudan Swaziland Tanzania Togo Tunisia Uganda Zambia Zimbabwe Asia: Select One Australia Bhutan Brunei Cambodia China Hong Kong India Indonesia Japan Laos Malaysia Maldives Mali Mauritania Mauritius Mayotte Mongolia Nepal Netherlands Antilles New Zealand North Korea Palau Philippines Singapore South Korea Sri Lanka Suriname Taiwan Thailand Vietnam Other:	a. 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 b. There are controversial names for some countries. c. Different languages have different names for countries. English short names are used in this example. d. TODO: Provide a choice of French names also used in the UN. The UN and Canada uses both English and French names. e. TODO: Provide a choice of country names in their native language (multi-lingual). f. TODO: Javascript processes (look up country info) as soon as user selects the country.
Country Info:	Save for future use. Internet Code: Telephone: +	a. TODO: As a good confirmation of the country name selected, display for the country chosen its various names, phone country code, and other information from the CIA Factbook and Wikipedia. b. Store the country selected so it can be restored on the next session. c. TODO: Usually a single currency code and currency name is associated with each country. d. TODO: Some websites include the language code in the country selection. But many countries have several official languages.

Province/State and Postal Codes

Specification of a country enables JavaScript to dynamically load and display state and postal code handling logic.

Zip/Postal code: (Text box)	12345-1234	a. Postal codes such as the US Zip code contain the province/state. b. 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. c. 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. d. 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, Canada Arkansas American Samoa Arizona British Columbia, Canada California Colorada Conneticut District of Colombia Delaware Florida Federated States Micronesia Georgia Guam Hawaii Iowa Idaho Illinois Indiana Kansas Kentucky Louisiana Manitoba, Canada Mariana Islands Massachusetts Marshall Islands Maryland Maine Michigan Minnesota Missouri Mississippi Micronesia (Federated States of) Montana New Brunswick, Canada North Carolina North Dakota Nebraska New Hampshire New Jersey New Mexico Nevada New York Newfoundland, Canada Northwest Territories, Canada Nova Scotia, Canada Nunavut, Canada Ohio Oklahoma Ontario, Canada Oregon Palau Pennsylvania Prince Edward Island, Canada Puerto Rico Quebec, Canada Rhode Island Saskatchewan, Canada South Carolina South Dakota Tennessee Texas Utah Virgin Islands Vermont Virginia Washington Wisconsin West Virginia Wyoming Yukon, Canada Other...	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.
Mexico Provinces:	Mexico: AG = Aguascalientes Aguascalientes BC = Baja California Norte Mexicali BS = Baja California Sur La Paz CH = Chihuahua Chihuahua CL = Colima Colima CM = Campeche Campeche CO = Coahuila Saltillo CS = Chiapas Tuxtla Gutiérrez DF = Distrito Federal DG = Durango Durango GR = Guerrero Chilpancingo de los Bravo GT = Guanajuato Guanajuato HG = Hidalgo Pachuca de Soto JA = Jalisco Guadalajara MI = Michoacan Morelia MO = Morelos Cuernavaca NA = Nayarit Tepic NL = Nuevo Leon Monterrey OA = Oaxaca Oaxaca de Juárez PU = Puebla Puebla de Zaragoza QR = Quintana Roo Chetumal QT = Queretaro Santiago de Querétaro SI = Sinaloa Culiacán SL = San Luis Potosi San Luis Potosi SO = Sonora Hermosillo TB = Tabasco Villahermosa TL = Tlaxcala Tlaxcala de Xicoténcatl TM = Tamaulipas Ciudad Victoria VE = Veracruz Xalapa YU = Yucatan Mérida ZA = Zacatecas Zacatecas	a. It's unfortunate that only three abbreviations of states in Mexico (MI, MO, BC) overlap state codes for the US and Canada. b. HTML for this list need to be stored in UTF-8 format.

US Image Map

Mouse over a state's postal abbreviation on the map for its name. Click for a list of museums in that state (on another page).



Although there are officially 50 stars for states in the United States flag, there are more state names because the District of Columbia (DC) is not considered a state, so there should at least be 51 entries in the state list. The two territories of the US, Puerto Rico, Guam, each 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. GU = Guam
13. GU = Guam
14. HI = Hawaii
15. ID = Idaho
16. IL = Illinois
17. IA = Iowa
18. IN = Indiana
19. KY = Kentucky
20. KS = Kansas
21. LA = Louisiana
22. ME = Maine
23. MA = Massachusetts
24. MD = Maryland
25. MN = Minnesota
26. MI = Michigan
27. MO = Missouri
28. MS = Mississippi
29. MT = Montana
30. NE = Nebraska
31. NV = Nevada
32. NH = New Hampshire
33. NJ = New Jersey
34. NM = New Mexico
35. NY = New York
36. NC = North Carolina
37. ND = North Dakota
38. OH = Ohio
39. OK = Oklahoma
40. OR = Oregon
41. PA = Pennsylvania
42. PR = Puerto Rico
43. RI = Rhode Island
44. SC = South Carolina
45. SD = South Dakota
46. TN = Tennessee
47. TX = Texas
48. UT = Utah
49. VT = Vermont
50. VA = Virginia
51. WA = Washington
52. WV = West Virginia
53. WI = Wisconsin
54. WY = Wyoming

Telephone Entry

With phone number portability, where people can keep their phone number when they move around, telephone prefixes can no longer be use reliably determine a user's location.

Phone:

TODO: Different countries have different area codes and formats.

Personal Identity Numbers

US Social Security/ or Canadian National Insurance Number:

Hide

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. 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.

Text Entry Fields

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
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.

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.