Building & Breaking    Web Forms     with Quaid-JS    Chris Lienert     @cliener
I work for Jardine Lloyd Thompson
Who used to smuggle opium
Insurance means forms
And forms
And more forms
Imagine filling that out online
Or on your mobile
Design Patternshttp://www.lukew.com/resources/web_form_design.asp
Design PatternsVertical label/field
Vertical Label/Field
Design PatternsVertical label/fieldHorizontal (search)
Horizontal (Search)
Design PatternsVertical label/fieldHorizontal (search)Clear path to completion
Clear Path to Completion
Design PatternsVertical label/fieldHorizontal (search)Clear path to completionMark optional fields
Mark Optional Fields
Don’t do this
BuildForm
BuildFormFieldset
BuildFormFieldset[no caption]
BuildFormFieldset[no caption]Block element (p, li, th, td)
BuildFormFieldset[no caption]Block element (p, li, th, td)Label (id)
BuildFormFieldset[no caption]Block element (p, li, th, td)Label (id)Field
Build<form method="post" action="wds.aspx"><fieldset><p><label for="name">Name</label> <inputtype="text" name="name" id="na...
HTML5 Formshttp://wufoo.com/html5
HTML5 Attributesmaxlength for TextArea
HTML5 Attributesmaxlength for TextArearequired
HTML5 Attributesmaxlength for TextArearequiredplaceholder
HTML5 Attributesmaxlength for TextArearequiredplaceholderautocorrect="off "
HTML5 Attributesmaxlength for TextArearequiredplaceholderautocorrect="off "autocapitalize="off "
HTML5 Attributesmaxlength for TextArearequiredplaceholderautocorrect="off "autocapitalize="off "autofocus
Autofocus in Practice – Type…
Autofocus in Practice – Type…
Autofocus in Practice – Argh!
HTML5 AttributesPattern • default error messages   are awful • doesnt scale well • does a fine robot dance
HTML5 AttributesPattern • pattern="/d*"
HTML5 Input TypesEmail • instant win • iOS keyboard love
HTML5 Input TypesDate, Month, Week, Time • don’t
HTML5 Input TypesTel • fairly useless • iOS keyboard love
People get things wrong
Validation to the rescue!
You Wouldn’t Like Me When I’m Angry
Validate Early,Validate OftenAllow people to make mistakes
Allow People to Make Mistakes
Allow People to Make Mistakes
Validate Early,Validate OftenAllow people to make mistakesClearly mark invalid fields
Clearly Mark Invalid Fields
Clearly Mark Invalid Fields<p><label for="birth-date">Birth Date</label> <input type="text" class="date"name="birth-date" ...
Clearly Mark Invalid Fields<p><label for="birth-date">Birth Date</label> <input type="text" class="date"name="birth-date" ...
Validate Early,Validate OftenAllow people to make mistakesClearly mark invalid fieldsPattern validate on entry
Pattern Validate on Entry
Validate Early,Validate OftenAllow people to make mistakesClearly mark invalid fieldsPattern validate on entryEnforce minim...
Enforce Minimum not Maximum
Validate Early,Validate OftenAllow people to make mistakesClearly mark invalid fieldsPattern validate on entryEnforce minim...
Get it Right
A Bunch of Malarkey
Special Exhibit
Special Exhibit
Special Exhibit
Build
Build
Build
Build        Lots of coding
Quaid JSEmbrace & extend HTML, DOM
Quaid JSEmbrace & extend HTML, DOMPolyfill older browsers
Embrace and ExtendTel • phone  <input type="tel" class="phone"> • mobile  <input type="tel" class="mobile">
Embrace and ExtendPostcode • data-state-field<input type="text" class="postcode" data-state-field="state"><select id="state"...
Embrace and ExtendTime<input type="text" class="time">Date<input type="text" class="date">Year<input type="text" class="ye...
Embrace and ExtendNumeric<input type="text" class="numeric">Integer<input type="text" class="integer">Currency<input type=...
Embrace and ExtendPositive Numeric<input type="text" class="positive_numeric">Positive Integer<input type="text" class="po...
Embrace and ExtendCredit Card<input type="text" class="credit_card">CSC<input type="text" class="csc">
Data AttributesRequired if<input type="checkbox" name="variable-field"id="variable-field">…<input type="text" name="target-fi...
Data AttributesVisible if<input type="checkbox" name="variable-field"id="variable-field">…<p data-visible-field="variable-fiel...
Custom ValidationInline$("#field").addValidation(function (el) {  if (!(el.isValid = !el.checked)) {    el.errorMessage = "...
Custom ValidationOn Submit$("#field").addSubmitValidation(function (el) {  if (!(el.isValid = !el.checked)) {    el.errorMe...
Custom ValidationAjax Server Call$("#postcode").addServerValidation({  path: "validation.svc/IsValidPostcode?postcode="})
Custom ValidationAjax Servicepublic ValidationResponse IsValidPostcode(stringpostcode, string caller){   using (var p = ne...
Custom ValidationAjax Servicepublic ValidationResponse IsValidPostcode(…){     …        return new ValidationResponse(…, c...
Custom ValidationAjax Response> validationResponse {  message: "",  caller: "postcode"}
Plug-in InternationalisationCustom methods and errorsquaid.forms-au-4.0.jsmessage: { required: "Value not entered" }quaid....
Elephant in the Room
Elephant in the Room                   6+
And the Rest6+         3.6+
When the Lights Go DownJavaScriptHTML5Server<label class="server-error">
Ready for the Takinghttps://github.com/cliener/Quaid-JS
On a Web Site Near Youhttp://physical.jltsport.com.au
@cliener
Standing on the Shoulders of GiantsWufooThe Current State of HTML5 Formshttp://wufoo.com/html5/Luke WWeb Form Design: Fill...
Standing on the Shoulders of GiantsSteve KrugDont Make Me Thinkhttp://www.sensible.com/dmmt.htmlPunkchipWAI-ARIA to enhanc...
Building & Breaking Web Forms with Quaid-JS
Building & Breaking Web Forms with Quaid-JS
Upcoming SlideShare
Loading in …5
×

Building & Breaking Web Forms with Quaid-JS

1,041 views

Published on

Presented by Chris Lienert at Web Directions South 2012, October 18 2012

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,041
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Building & Breaking Web Forms with Quaid-JS

    1. 1. Building & Breaking Web Forms with Quaid-JS Chris Lienert @cliener
    2. 2. I work for Jardine Lloyd Thompson
    3. 3. Who used to smuggle opium
    4. 4. Insurance means forms
    5. 5. And forms
    6. 6. And more forms
    7. 7. Imagine filling that out online
    8. 8. Or on your mobile
    9. 9. Design Patternshttp://www.lukew.com/resources/web_form_design.asp
    10. 10. Design PatternsVertical label/field
    11. 11. Vertical Label/Field
    12. 12. Design PatternsVertical label/fieldHorizontal (search)
    13. 13. Horizontal (Search)
    14. 14. Design PatternsVertical label/fieldHorizontal (search)Clear path to completion
    15. 15. Clear Path to Completion
    16. 16. Design PatternsVertical label/fieldHorizontal (search)Clear path to completionMark optional fields
    17. 17. Mark Optional Fields
    18. 18. Don’t do this
    19. 19. BuildForm
    20. 20. BuildFormFieldset
    21. 21. BuildFormFieldset[no caption]
    22. 22. BuildFormFieldset[no caption]Block element (p, li, th, td)
    23. 23. BuildFormFieldset[no caption]Block element (p, li, th, td)Label (id)
    24. 24. BuildFormFieldset[no caption]Block element (p, li, th, td)Label (id)Field
    25. 25. Build<form method="post" action="wds.aspx"><fieldset><p><label for="name">Name</label> <inputtype="text" name="name" id="name"></p></fieldset></form>
    26. 26. HTML5 Formshttp://wufoo.com/html5
    27. 27. HTML5 Attributesmaxlength for TextArea
    28. 28. HTML5 Attributesmaxlength for TextArearequired
    29. 29. HTML5 Attributesmaxlength for TextArearequiredplaceholder
    30. 30. HTML5 Attributesmaxlength for TextArearequiredplaceholderautocorrect="off "
    31. 31. HTML5 Attributesmaxlength for TextArearequiredplaceholderautocorrect="off "autocapitalize="off "
    32. 32. HTML5 Attributesmaxlength for TextArearequiredplaceholderautocorrect="off "autocapitalize="off "autofocus
    33. 33. Autofocus in Practice – Type…
    34. 34. Autofocus in Practice – Type…
    35. 35. Autofocus in Practice – Argh!
    36. 36. HTML5 AttributesPattern • default error messages are awful • doesnt scale well • does a fine robot dance
    37. 37. HTML5 AttributesPattern • pattern="/d*"
    38. 38. HTML5 Input TypesEmail • instant win • iOS keyboard love
    39. 39. HTML5 Input TypesDate, Month, Week, Time • don’t
    40. 40. HTML5 Input TypesTel • fairly useless • iOS keyboard love
    41. 41. People get things wrong
    42. 42. Validation to the rescue!
    43. 43. You Wouldn’t Like Me When I’m Angry
    44. 44. Validate Early,Validate OftenAllow people to make mistakes
    45. 45. Allow People to Make Mistakes
    46. 46. Allow People to Make Mistakes
    47. 47. Validate Early,Validate OftenAllow people to make mistakesClearly mark invalid fields
    48. 48. Clearly Mark Invalid Fields
    49. 49. Clearly Mark Invalid Fields<p><label for="birth-date">Birth Date</label> <input type="text" class="date"name="birth-date" id="birth-date"required></p>
    50. 50. Clearly Mark Invalid Fields<p><label for="birth-date">Birth Date</label> <input type="text" class="date"name="birth-date" id="birth-date" requiredaria-invalid="true"><label for="birth_date" class="errata"role="alert">Please enter a value</label></p>
    51. 51. Validate Early,Validate OftenAllow people to make mistakesClearly mark invalid fieldsPattern validate on entry
    52. 52. Pattern Validate on Entry
    53. 53. Validate Early,Validate OftenAllow people to make mistakesClearly mark invalid fieldsPattern validate on entryEnforce minimum not maximum
    54. 54. Enforce Minimum not Maximum
    55. 55. Validate Early,Validate OftenAllow people to make mistakesClearly mark invalid fieldsPattern validate on entryEnforce minimum not maximumGet it right
    56. 56. Get it Right
    57. 57. A Bunch of Malarkey
    58. 58. Special Exhibit
    59. 59. Special Exhibit
    60. 60. Special Exhibit
    61. 61. Build
    62. 62. Build
    63. 63. Build
    64. 64. Build Lots of coding
    65. 65. Quaid JSEmbrace & extend HTML, DOM
    66. 66. Quaid JSEmbrace & extend HTML, DOMPolyfill older browsers
    67. 67. Embrace and ExtendTel • phone <input type="tel" class="phone"> • mobile <input type="tel" class="mobile">
    68. 68. Embrace and ExtendPostcode • data-state-field<input type="text" class="postcode" data-state-field="state"><select id="state" name="state">…</ select>
    69. 69. Embrace and ExtendTime<input type="text" class="time">Date<input type="text" class="date">Year<input type="text" class="year">
    70. 70. Embrace and ExtendNumeric<input type="text" class="numeric">Integer<input type="text" class="integer">Currency<input type="text" class="currency">
    71. 71. Embrace and ExtendPositive Numeric<input type="text" class="positive_numeric">Positive Integer<input type="text" class="positive_integer">Positive Currency<input type="text" class="positive_currency">
    72. 72. Embrace and ExtendCredit Card<input type="text" class="credit_card">CSC<input type="text" class="csc">
    73. 73. Data AttributesRequired if<input type="checkbox" name="variable-field"id="variable-field">…<input type="text" name="target-field"id="target-field" data-required-field="variable-field">
    74. 74. Data AttributesVisible if<input type="checkbox" name="variable-field"id="variable-field">…<p data-visible-field="variable-field">…</p>
    75. 75. Custom ValidationInline$("#field").addValidation(function (el) { if (!(el.isValid = !el.checked)) { el.errorMessage = "Check the box or else."; }});
    76. 76. Custom ValidationOn Submit$("#field").addSubmitValidation(function (el) { if (!(el.isValid = !el.checked)) { el.errorMessage = "Check the box or else.Really."; }});
    77. 77. Custom ValidationAjax Server Call$("#postcode").addServerValidation({ path: "validation.svc/IsValidPostcode?postcode="})
    78. 78. Custom ValidationAjax Servicepublic ValidationResponse IsValidPostcode(stringpostcode, string caller){ using (var p = new PostalAddressClient()) { if (!string.IsNullOrEmpty(postcode) && !p.IsValidPostcode(postcode)) { …}
    79. 79. Custom ValidationAjax Servicepublic ValidationResponse IsValidPostcode(…){ … return new ValidationResponse(…, caller); } } return new ValidationResponse(string.Empty, caller);}
    80. 80. Custom ValidationAjax Response> validationResponse { message: "", caller: "postcode"}
    81. 81. Plug-in InternationalisationCustom methods and errorsquaid.forms-au-4.0.jsmessage: { required: "Value not entered" }quaid.forms-ca-4.0.jsmessage: { required:"Value not entered, eh. Go Leafs!" }
    82. 82. Elephant in the Room
    83. 83. Elephant in the Room 6+
    84. 84. And the Rest6+ 3.6+
    85. 85. When the Lights Go DownJavaScriptHTML5Server<label class="server-error">
    86. 86. Ready for the Takinghttps://github.com/cliener/Quaid-JS
    87. 87. On a Web Site Near Youhttp://physical.jltsport.com.au
    88. 88. @cliener
    89. 89. Standing on the Shoulders of GiantsWufooThe Current State of HTML5 Formshttp://wufoo.com/html5/Luke WWeb Form Design: Filling in the Blankshttp://www.lukew.com/resources/web_form_design.aspEvolving E-commerce Checkouthttp://www.lukew.com/ff/entry.asp?1579
    90. 90. Standing on the Shoulders of GiantsSteve KrugDont Make Me Thinkhttp://www.sensible.com/dmmt.htmlPunkchipWAI-ARIA to enhance form validationhttp://www.punkchip.com/2010/12/aria-enhance-form-validation/

    ×