Databases
StackOverflow2013
Postsdbo
POWhat Event to Trigger Javascript Form Field Validation and Formatting?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat Event to Trigger Javascript Form Field Validation and Formatting?
    primarykey
    data
    text
    <p>Let me first say, we validate every field on the server side, so this a question about client-side usability.</p> <p>What is the conventional wisdom on <em>exactly when</em> to validate and format html form input fields using javascript?</p> <p>As an example, we have a phone number field. We allow numbers, spaces, parentheses, and hyphens. We want the field to have ten digits. Also, we want the field to look like (123) 456-7890, even if the user doesn't type it that way.</p> <p>It seems like we can</p> <ul> <li>Validate and format it when the user exits the field.</li> <li>Validate and format on every character entered.</li> <li>Intercept keystrokes and prevent the user from entering characters that are wrong.</li> <li>Some combination of the above (e.g. format on entry and validate on exit, prevent on entry and format on exit, etc.)</li> <li>[<strong>Added</strong>] Wait and do all the validation and formatting when the user clicks submit.</li> </ul> <p>I've seen it done all of these ways, but I can't find information about what is best (or even generally accepted) from a usability perspective, and more importantly, why. </p> <p>[<strong>Edit</strong>: Some clarification]</p> <p>We are absolutely not enforcing any format standards. When I say format, I mean we'll use javascript to rewrite things so they look nice. If the user types 1234567890, we'll change it to (123) 456-7890. There are no "formatting rules" that can fail.</p> <p>I distinguish this from validation because if they don't type enough numbers, we have to make them fix it.</p> <p>I guess I should rephrase the question as "what is the conventional wisdom on exactly when to validate and exactly when to format...?</p> <p>Good info in the answers so far!</p> <p><strong>EDIT</strong>: I'm accepting my own answer below in the hopes that others will find the link as helpful as I did.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USbmb
    1. USbmb
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWhat Event to Trigger Javascript Form Field Validation and Formatting?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POWhat Event to Trigger Javascript Form Field Validation and Formatting?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POWhat Event to Trigger Javascript Form Field Validation and Formatting?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COhttp://www.alistapart.com/articles/inline-validation-in-web-forms/
      singulars
      1. POWhat Event to Trigger Javascript Form Field Validation and Formatting?
      1. USmontrealist
    2. COdalbaeb, this great link should go into an answer instead of a comment.
      singulars
      1. POWhat Event to Trigger Javascript Form Field Validation and Formatting?
      1. USbmb
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload