Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:8Length:58 minutes
Credit js 3
  • Overview
  • Transcript

3.1 Final Words

Thank you very much for watching this course–let’s take a moment to go over everything you’ve learned! I’m Adi Purdila and until next time, take care.

3.1 Final Words

Hello and welcome to the conclusion lesson of this course. Now that we've finished our formal let's do a quick summary of what went into creating it and we started with defining some masks for the form for the number we used this format. This is for date and this is for the CVV. Next, we created this mechanism that allowed our form to be validated once we finished typing. And we're setting a one second interval. So after we finish typing, one second passes and then a function is triggered. That function is called a finished typing. And it's received two parameters, an ID or the ID of the input that was typed into and the value of it. Now with the ID we do a switch and we're verifying which input was typed into. And then we're validating that value, for the number we're using Diego Salazar's function. That in turn uses Luhn's algorithm and we're validating by card type. For the date we're just making sure that our validation or our expiration date is at least one month ahead of the current date. And with the CVV, well, it needs to be at least three digits, three or four digits. And that's the most important part, that's the core functionality of our four. After that of course we added some extra features like automatic switching between fields. If we have a valid value in one of the fields we automatically move on to the next field and this is a way to make the user experience a little bit better. Now there is something I would like to address quickly and that is accessibility. If you're going to run this form through a screen reader, the characters used in the mask will be read out loud and that might not always be what you want. So, just keep that in mind. As an experiment I think this is really, really good but for a real world situation you might want to find a slightly different way of presenting those inputs or presenting the value in those inputs in a preformatted manner. So with that said I would like to thank you very much for watching. I'm Adi Purdila and until next time, take care.

Back to the top