INTERACTIVITY
04.03 Comparing Two Inputs WITH JAVASCRIPT
Comparing Two Inputs
INTERACTIVITY
04.03 Comparing Two Inputs WITH JAVASCRIPT
Email comparison
INTERACTIVITY
04.03 Comparing Two Inputs WITH JAVASCRIPT
Validating Input
• What?
• Compare that two emails are the same
• How?
• HTML: email input type and required attribute
• JavaScript
• When?
• As soon as the second email is entered
INTERACTIVITY
04.03 Comparing Two Inputs WITH JAVASCRIPT
Validating at Input Time
• Which event?
• oninput and onchange are both options
• What should we compare?
• Is it the inputs, or some attribute of the inputs?
• What is the output?
• How do we communicate the result of the comparison?
INTERACTIVITY
04.03 Comparing Two Inputs WITH JAVASCRIPT
INTERACTIVITY
04.03 Comparing Two Inputs WITH JAVASCRIPT
Hmmmm…..
• We check, but it doesn’t have “teeth”
• How can we stop the form submission?
INTERACTIVITY
04.03 Comparing Two Inputs WITH JAVASCRIPT
Validating Input
• What?
• Compare that two emails are the same
• How?
• HTML: email input type and required attribute
• JavaScript
• When?
• As soon as the second email is entered
• And on the submit!!
INTERACTIVITY
04.03 Comparing Two Inputs WITH JAVASCRIPT
“return”
• Functions can return values (Numbers,
Strings, Booleans, Objects, Arrays…)
• We can use a boolean return value to halt
an action
INTERACTIVITY
04.03 Comparing Two Inputs WITH JAVASCRIPT
Review
• You want to be careful of what you are
comparing and when
• JavaScript is still a great tool for verifying
the input
• Make sure you can create a basic form
before you try to add interactivity
INTERACTIVITY
04.03 Comparing Two Inputs WITH JAVASCRIPT
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
