simple validation - wd4e...input attributes • required • halts the submit process if any of the...
TRANSCRIPT
![Page 1: Simple Validation - WD4E...Input Attributes • required • Halts the submit process if any of the required elements are empty • Can cause issues when you are developing your code,](https://reader034.vdocuments.us/reader034/viewer/2022043011/5fa3c44c709e534bb42d314b/html5/thumbnails/1.jpg)
Simple Validation INTERACTIVITY
WITH JAVASCRIPT 04.02
Simple Validation
![Page 2: Simple Validation - WD4E...Input Attributes • required • Halts the submit process if any of the required elements are empty • Can cause issues when you are developing your code,](https://reader034.vdocuments.us/reader034/viewer/2022043011/5fa3c44c709e534bb42d314b/html5/thumbnails/2.jpg)
Simple Validation INTERACTIVITY
WITH JAVASCRIPT 04.02
Validating Input
• What?
• How?
![Page 3: Simple Validation - WD4E...Input Attributes • required • Halts the submit process if any of the required elements are empty • Can cause issues when you are developing your code,](https://reader034.vdocuments.us/reader034/viewer/2022043011/5fa3c44c709e534bb42d314b/html5/thumbnails/3.jpg)
Simple Validation INTERACTIVITY
WITH JAVASCRIPT 04.02
What to Validate
• The type of input
• You want a number instead of a string…
• The format of the input
• Is it a valid email address or URL?
• Does the phone number have spaces?
• The value of the input
• Should it be required input?
• Do the email values match?
![Page 4: Simple Validation - WD4E...Input Attributes • required • Halts the submit process if any of the required elements are empty • Can cause issues when you are developing your code,](https://reader034.vdocuments.us/reader034/viewer/2022043011/5fa3c44c709e534bb42d314b/html5/thumbnails/4.jpg)
Simple Validation INTERACTIVITY
WITH JAVASCRIPT 04.02
How Do You Want to Validate
• Use new HTML5 input types • email, number, url
• Use HTML5 attributes • required, placeholder, min, max
• Use JavaScript functions • Write custom code to validate
![Page 5: Simple Validation - WD4E...Input Attributes • required • Halts the submit process if any of the required elements are empty • Can cause issues when you are developing your code,](https://reader034.vdocuments.us/reader034/viewer/2022043011/5fa3c44c709e534bb42d314b/html5/thumbnails/5.jpg)
Simple Validation INTERACTIVITY
WITH JAVASCRIPT 04.02
Input Types
• The input types require that the browser
validate the format of the input
• When supported, it will halt the submit
process for non-valid input
• The first non-valid input is put into focus
• If not supported, the input type is just text
![Page 6: Simple Validation - WD4E...Input Attributes • required • Halts the submit process if any of the required elements are empty • Can cause issues when you are developing your code,](https://reader034.vdocuments.us/reader034/viewer/2022043011/5fa3c44c709e534bb42d314b/html5/thumbnails/6.jpg)
Simple Validation INTERACTIVITY
WITH JAVASCRIPT 04.02
Input Attributes
• required • Halts the submit process if any of the required
elements are empty
• Can cause issues when you are developing your
code, so sometimes paired with the form attribute
novalidate
![Page 7: Simple Validation - WD4E...Input Attributes • required • Halts the submit process if any of the required elements are empty • Can cause issues when you are developing your code,](https://reader034.vdocuments.us/reader034/viewer/2022043011/5fa3c44c709e534bb42d314b/html5/thumbnails/7.jpg)
Simple Validation INTERACTIVITY
WITH JAVASCRIPT 04.02
pattern
• Works with input type = text and requires the
input have a specific form
• [0-9]{5}
• [0-9]{13-16}
• [a-zA-Z]+
• Best if used with placeholder & supporting text
• http://html5pattern.com/
![Page 8: Simple Validation - WD4E...Input Attributes • required • Halts the submit process if any of the required elements are empty • Can cause issues when you are developing your code,](https://reader034.vdocuments.us/reader034/viewer/2022043011/5fa3c44c709e534bb42d314b/html5/thumbnails/8.jpg)
Simple Validation INTERACTIVITY
WITH JAVASCRIPT 04.02
Limiting number
• min, max, and step can place limits on
number inputs
• The range attribute also has a max and
min, just a different look
![Page 9: Simple Validation - WD4E...Input Attributes • required • Halts the submit process if any of the required elements are empty • Can cause issues when you are developing your code,](https://reader034.vdocuments.us/reader034/viewer/2022043011/5fa3c44c709e534bb42d314b/html5/thumbnails/9.jpg)
Simple Validation INTERACTIVITY
WITH JAVASCRIPT 04.02
Pattern vs Max/Min
• What if you want a zip code?
• What do you want to check?
• That the input is five digits
• How do you want to check it?
• Use input = number + min and max
• Use input = text + pattern
![Page 10: Simple Validation - WD4E...Input Attributes • required • Halts the submit process if any of the required elements are empty • Can cause issues when you are developing your code,](https://reader034.vdocuments.us/reader034/viewer/2022043011/5fa3c44c709e534bb42d314b/html5/thumbnails/10.jpg)
Simple Validation INTERACTIVITY
WITH JAVASCRIPT 04.02
Validation with JavaScript
• There isn’t always a guarantee that the
browser will support the input type or
pattern attribute
• It is possible to add extra validation using
the Events and custom JavaScript
functions
![Page 11: Simple Validation - WD4E...Input Attributes • required • Halts the submit process if any of the required elements are empty • Can cause issues when you are developing your code,](https://reader034.vdocuments.us/reader034/viewer/2022043011/5fa3c44c709e534bb42d314b/html5/thumbnails/11.jpg)
Simple Validation INTERACTIVITY
WITH JAVASCRIPT 04.02
Review
• Embrace the new input types and
attributes provided
• But remember that you will still need to
add JavaScript if you want to ensure
correctness
![Page 12: Simple Validation - WD4E...Input Attributes • required • Halts the submit process if any of the required elements are empty • Can cause issues when you are developing your code,](https://reader034.vdocuments.us/reader034/viewer/2022043011/5fa3c44c709e534bb42d314b/html5/thumbnails/12.jpg)
Simple Validation INTERACTIVITY
WITH JAVASCRIPT 04.02
Acknowledgements/Contributions
These slides are Copyright 2015- Colleen van Lent as part of
http://www.intro-webdesign.com/ and made available under a Creative
Commons Attribution Non-Commercial 4.0 License. Please maintain
this last slide in all copies of the document to comply with the attribution
requirements of the license. If you make a change, feel free to add
your name and organization to the list of contributors on this page as
you republish the materials.
Initial Development: Colleen van Lent , University of Michigan School of
Information