Building & Breaking Web Forms with Quaid-JS
•Download as KEY, PDF•
0 likes•822 views
The document discusses building and designing web forms using Quaid-JS. It covers design patterns for forms like vertical labels and fields. It also discusses building forms with HTML5 attributes, validating forms early and often, embracing and extending HTML and DOM with custom input types, using data attributes, and adding custom validation with inline, on submit, and AJAX methods. Internationalization is supported by plug-in JavaScript files for different locales. The library is open source on GitHub and has been used on a live website.
Report
Share
Building & Breaking Web Forms with Quaid-JS
- 1. Building & Breaking Web Forms with Quaid-JS Chris Lienert @cliener
- 2. I work for Jardine Lloyd Thompson
- 3. Who used to smuggle opium
- 5. And forms
- 7. Imagine filling that out online
- 8. Or on your mobile
- 12. Design Patterns Vertical label/field Horizontal (search)
- 14. Design Patterns Vertical label/field Horizontal (search) Clear path to completion
- 15. Clear Path to Completion
- 16. Design Patterns Vertical label/field Horizontal (search) Clear path to completion Mark optional fields
- 18. Don’t do this
- 19. Build Form
- 22. Build Form Fieldset [no caption] Block element (p, li, th, td)
- 23. Build Form Fieldset [no caption] Block element (p, li, th, td) Label (id)
- 24. Build Form Fieldset [no caption] Block element (p, li, th, td) Label (id) Field
- 25. Build <form method="post" action="wds.aspx"> <fieldset> <p><label for="name">Name</label> <input type="text" name="name" id="name"></p> </fieldset> </form>
- 27. HTML5 Attributes maxlength for TextArea
- 28. HTML5 Attributes maxlength for TextArea required
- 29. HTML5 Attributes maxlength for TextArea required placeholder
- 30. HTML5 Attributes maxlength for TextArea required placeholder autocorrect="off "
- 31. HTML5 Attributes maxlength for TextArea required placeholder autocorrect="off " autocapitalize="off "
- 32. HTML5 Attributes maxlength for TextArea required placeholder autocorrect="off " autocapitalize="off " autofocus
- 33. Autofocus in Practice – Type…
- 34. Autofocus in Practice – Type…
- 35. Autofocus in Practice – Argh!
- 36. HTML5 Attributes Pattern • default error messages are awful • doesn't scale well • does a fine robot dance
- 37. HTML5 Attributes Pattern • pattern="/d*"
- 38. HTML5 Input Types Email • instant win • iOS keyboard love
- 39. HTML5 Input Types Date, Month, Week, Time • don’t
- 40. HTML5 Input Types Tel • fairly useless • iOS keyboard love
- 41. People get things wrong
- 42. Validation to the rescue!
- 43. You Wouldn’t Like Me When I’m Angry
- 44. Validate Early,Validate Often Allow people to make mistakes
- 45. Allow People to Make Mistakes
- 46. Allow People to Make Mistakes
- 47. Validate Early,Validate Often Allow people to make mistakes Clearly mark invalid fields
- 48. Clearly Mark Invalid Fields
- 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. Clearly Mark Invalid Fields <p><label for="birth-date">Birth Date</ label> <input type="text" class="date" name="birth-date" id="birth-date" required aria-invalid="true"> <label for="birth_date" class="errata" role="alert">Please enter a value</label></ p>
- 51. Validate Early,Validate Often Allow people to make mistakes Clearly mark invalid fields Pattern validate on entry
- 52. Pattern Validate on Entry
- 53. Validate Early,Validate Often Allow people to make mistakes Clearly mark invalid fields Pattern validate on entry Enforce minimum not maximum
- 54. Enforce Minimum not Maximum
- 55. Validate Early,Validate Often Allow people to make mistakes Clearly mark invalid fields Pattern validate on entry Enforce minimum not maximum Get it right
- 56. Get it Right
- 57. A Bunch of Malarkey
- 58. Special Exhibit
- 59. Special Exhibit
- 60. Special Exhibit
- 63. Build
- 64. Build
- 65. Build
- 66. Build Lots of coding
- 67. Quaid JS Embrace & extend HTML, DOM
- 68. Quaid JS Embrace & extend HTML, DOM Polyfill older browsers
- 69. Embrace and Extend Tel • phone <input type="tel" class="phone"> • mobile <input type="tel" class="mobile">
- 70. Embrace and Extend Postcode • data-state-field <input type="text" class="postcode" data- state-field="state"> <select id="state" name="state">…</ select>
- 71. Embrace and Extend Time <input type="text" class="time"> Date <input type="text" class="date"> Year <input type="text" class="year">
- 72. Embrace and Extend Numeric <input type="text" class="numeric"> Integer <input type="text" class="integer"> Currency <input type="text" class="currency">
- 73. Embrace and Extend Positive Numeric <input type="text" class="positive_numeric"> Positive Integer <input type="text" class="positive_integer"> Positive Currency <input type="text" class="positive_currency">
- 74. Embrace and Extend Credit Card <input type="text" class="credit_card"> CSC <input type="text" class="csc">
- 75. Data Attributes Required if <input type="checkbox" name="variable-field" id="variable-field"> … <input type="text" name="target-field" id="target-field" data-required- field="variable-field">
- 76. Data Attributes Visible if <input type="checkbox" name="variable-field" id="variable-field"> … <p data-visible-field="variable-field">…</p>
- 77. Custom Validation Inline $("#field").addValidation(function (el) { if (!(el.isValid = !el.checked)) { el.errorMessage = "Check the box or else."; } });
- 78. Custom Validation On Submit $("#field").addSubmitValidation(function (el) { if (!(el.isValid = !el.checked)) { el.errorMessage = "Check the box or else. Really."; } });
- 79. Custom Validation Ajax Server Call $("#postcode").addServerValidation({ path: "validation.svc/IsValidPostcode? postcode=" })
- 80. Custom Validation Ajax Service public ValidationResponse IsValidPostcode(string postcode, string caller) { using (var p = new PostalAddressClient()) { if (!string.IsNullOrEmpty(postcode) && ! p.IsValidPostcode(postcode)) { … }
- 81. Custom Validation Ajax Service public ValidationResponse IsValidPostcode(…) { … return new ValidationResponse(…, caller); } } return new ValidationResponse(string.Empty, caller); }
- 82. Custom Validation Ajax Response > validationResponse { message: "", caller: "postcode" }
- 83. Plug-in Internationalisation Custom methods and errors quaid.forms-au-4.0.js message: { required: "Value not entered" } quaid.forms-ca-4.0.js message: { required: "Value not entered, eh. Go Leafs!" }
- 84. Elephant in the Room
- 85. Elephant in the Room 6+
- 86. And the Rest 6+ 3.6+
- 87. When the Lights Go Down JavaScript HTML5 Server <label class="server-error">
- 88. Ready for the Taking https://github.com/cliener/Quaid-JS
- 89. On a Web Site Near You http://physical.jltsport.com.au
- 90. @cliener
- 91. Standing on the Shoulders of Giants Wufoo The Current State of HTML5 Forms http://wufoo.com/html5/ Luke W Web Form Design: Filling in the Blanks http://www.lukew.com/resources/web_form_design.asp Evolving E-commerce Checkout http://www.lukew.com/ff/entry.asp?1579
- 92. Standing on the Shoulders of Giants Steve Krug Don't Make Me Think http://www.sensible.com/dmmt.html Punkchip WAI-ARIA to enhance form validation http://www.punkchip.com/2010/12/aria-enhance- form-validation/
Editor's Notes
- \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