How I may help
LinkedIn Profile Email me!
Call me using Skype client on your machine

Reload this page Javascript for Data Entry Validation

This page contains a example of the most user-helpful approaches to validate manual input of data on a screen. All Javascript is contained in the HTML file.

Related:

  • Javascript Coding
  • Date & Time Programming
  • Coding to Specify Color
  • Application Development
  • Web Project Plan
  • Web Development Tools
  • Java Programming
  •  

    Topics this page:

  • Country Select
  • Geographical Fields
  • Phone Numbers
  • Personal IDs
  • Text Entry Fields
  • Money Fields
  • Your comments???
  •  

    Site Map List all pages on this site 
    About this site About this site 
    Go to first topic Go to Bottom of this page


    Authentication Fields

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

      Heading Fields Help information
      Email:
      (Text box)
      Save on device
      Reminder

      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
      [Medium][Strong]
      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 -


    Go to Top of this page.
    Previous topic this page

    Geographic Selection


    Go to Top of this page.
    Previous topic this page

    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: Map here.

      After a region is selected, countries specific to that region appears in place of the region list.

      2. Country:
      North America:

      Carribean:

      Central America:

      South America:

      Western and Northern Europe:

      Eastern Europe:

      Middle East:

      Africa:

      Asia:

      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 Countriesanother page on this site

      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.


    Go to Top of this page.
    Previous topic this page

    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:

      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:

      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.


    Go to Top of this page.
    Previous topic this page

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

      Alabama Alaska Arizona Arkansas California Colorado Conneticut Delaware Florida Georgia Hawaii Idaho Illinois Indiana Iowa Kansas Kentucky Louisiana Maine Maryland Massachusetts Michigan Minnesota Mississippi Montana Montana Nebraska Neveda New Hampshire New Jersey New Mexico New York North Carolina North Dakota Ohio Oklahoma Oregon Pennsylvania Rhode Island South Carolina South Dakota Tennessee Texas Utah Vermont Virginia Washington West Virginia Wisconsin Wyoming U.S. Map - clickable imagemap

      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

    Go to Top of this page.
    Previous topic this page

    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:       Canadian Area Codes TODO: Different countries have different area codes and formats.


    Go to Top of this page.
    Previous topic this page

    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.


    Go to Top of this page.
    Previous topic this page

    Text Entry Fields

      Check box: All: Reminder CHECKED is specified to pre-select a checkbox.
      Radio buttons: Yes
      No
      Other (please specify)

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


    Go to Top of this page.
    Previous topic this page

    Money Fields

      Currency
      (Text box)
      USD Reminder CSS Style="text-align: right" is used for IE browsers. Javascript onKeypress code is specified to prevent non-numeric characters from being entered.
      Reminder The currency symbol, decimal point, and number of decimals need to be localized to the useranother page on this site
      The Euro currency symbol can be displayed with a graphic or a Unicode HTML code.
      Card Type: Checkout via Google

      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)
      Reminder 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)
      / 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! Reminder Both width="4" is specified for Netscape and style="WIDTH: 265px" for IE browsers.
      Reminder SELECTED is specified to pre-select the middle option for user convenience.


    Go to Top of this page.
    Previous topic this page

    Portions ©Copyright 1996-2014 Wilson Mar. All rights reserved. | Privacy Policy |


    How I may help

    Send a message with your email client program


    Your rating of this page:
    Low High




    Your first name:

    Your family name:

    Your location (city, country):

    Your Email address: 



      Top of Page Go to top of page

    Thank you!