2.3 Cleave.js

Cleave is a very handy plugin used for formatting inputs. It works for credit card numbers, dates, phone numbers, and a few other patterns. It's super easy to use so let's dive in and I'll show you some examples. In this demo, I've prepared a simple form that asks for credit card information, so it asks for the number, expiration date and that security code. Now, all of these three are text inputs, and without any kind of formatting, you can basically put in, whatever you want in them. Of course, if you submit this form it will not be validated, but it would be nice to limit the number of options we have on each one of these fields. So for example on the expiration date, we wanna format it as something like this. On the CVV, most of the time, we just need to accept the group of three digits. On the credit card number, it would be nice to kind of separate each group, depending on the credit card type, and maybe even show an icon, as a visual confirmation on the type of card that we're using. Well, we can do all of these things with this very handy plugin called Cleave. And if you go to this GitHub page, you will find the instructions for downloading it via NPM or, we can go to CDNJS, and we can grab the default file. And then, in my HTML document, I can say script src, and I'm just gonna paste that in, and then I'll do another script, where we're gonna activate the plugin. So here's how you do that, you define a variable, let's say cleaveCCNumber, right, so this is for the credit card number. That's gonna be = new Cleave, we pass in an ID or a class name for the element that we're targeting, in my case, I have an input type text with an ID of cc-number, so that's what I'm gonna put in here, and then we can pass in some options. For the credit card, I'm gonna use the option credit card and set it to true, and that's it. Now, when I start typing in, You will see that the number is nicely split into groups, and it only accepts numbers, I cannot do other characters, right? That's pretty cool. But also what I wanna do is, I wanna display an icon here, that shows me what kind of credit card I'm using, that's also very easy to do. So right here I have an icons folder, where I downloaded some SVG images for five of the most common credit card types American Express, Discover, JCB, MasterCard, and Visa. Of course, when you're doing this yourself, you can add as many as you want. So what I'm gonna do, is onCreditCardTypeChanged: function(type), I'm gonna say document, querySelector(), and we're gonna target my cc-number. And I'm gonna say ClassList = Type;. So cleave, has a nice algorithm behind it that detects what kind of credit card I'm using. And when the type is changed, I have this little function that passes in the type, and all I'm doing is setting that type as a class, on my actual input. So now if we do a quick inspect, you'll see that as I'm typing, see, my input now has a class of visa. If I do 35, it has a class of JCB, if I do 51 which is MasterCard, it's gonna add the class of MasterCard. So I can use that to my advantage and do something like this. I'm gonna target my cc-number here, and I'm gonna set these SVG Icons as backgrounds to my input. So I'm gonna say background-size: 2rem;, repeat: no-repeat and position, I wanna position in the middle, but also to the far right, while also leaving 1rem of distance. So I'm gonna say, (calc 100%- 1rem), and center;. And then, I can go like this Visa and I can say background-image: url(icons/cc-visa), and I'll do the same for the rest of the items. So next in line is Amex, Next is oops, Discover. Next is JCB, And finally we have MasterCard. And with that done, You'll see that now if I start with a 4, that's a Visa card, if I start with 34 or 37, that's American Express. And notice the format changes as well, which is pretty cool. JCB starts with 35, then Visa starts with 4 I already told you that, MasterCard starts with 51 or 55 and Discover starts with 6011 or 65 or 644, oops 644, right? All right so as you can see, the algorithm recognizes all these credit card types and it changes, the type automatically, and that's pretty cool. Now let's move on to the other two elements, the first one is an expiration date, so we need to format it accordingly. So for the expiration date, we'll do another variable cleaveCCDate=new Cleave, ('cc-exp-date') which is the ID of this element, and let's pass in some options. I'm gonna say date: true, and we can also specify datePattern, and here we're passing an array, month and year and this requires values that look like this, okay? if I were to do year capital, it's gonna require us to do the full year, but in my case, the lowercase y, is all we need. Save, so now, We can just input, Numbers in that format. And finally for CVV, or for our security code, Var cleaveCCCVV obviously you can name these whatever you want, new Cleave, and inside, I'm gonna say blocks. I want blocks of three and numeric only equals true, so I just want a block of three digits and also just numeric, so I can not input any other characters. All right, and that's how you can format form inputs using cleave.js. Now our next plugin is a very useful one, it's called scrollTrigger.js, and you can use it to remove or add classes when you scroll to particular element, you'll learn more about that in the next lesson.