Scribd
Upload
23 views10 pages

04.03.JS ComparingTwoInputs

The document discusses comparing two email inputs in JavaScript by validating the inputs as the second email is entered and on form submission. It explains using HTML attributes, comparing the input values, and returning a boolean from a function to halt submission if emails don't match.

Uploaded by

Adhem Naiji
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
23 views10 pages

04.03.JS ComparingTwoInputs

The document discusses comparing two email inputs in JavaScript by validating the inputs as the second email is entered and on form submission. It explains using HTML attributes, comparing the input values, and returning a boolean from a function to halt submission if emails don't match.

Uploaded by

Adhem Naiji
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

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

You might also like