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

2.3 JavaScript Preparation

It’s time to begin writing the JavaScript. We’ll do so directly in our scripts.js file, so let’s begin.

2.3 JavaScript Preparation

Hello and welcome to lesson number three of this course where I will begin writing the JavaScript. Now we'll start of course in our scripts file, and will do a function in here. This basically means on documents ready, and we'll start by defining a couple of variables. We'll get the number expiration date and CVV as variables that reference our three fields, and then will get the payment button, and then the first thing we got to do is use the jQuery plugin the input mask want to mask our imports because currently they look something like this, they accept any kind of a value, and we don't want that. The card number, for example must have a specific format and can only contain digits. The expiration date must be in a specific format more precisely MM- Y Y YY, which is month and year and the CVV must be three or four digits. So to make things even more interesting, we're gonna add some spaces and a specific format for these masks. So for example the credit card number will be grouped, and we'll have groups of four digits separated by a space. So, let's go ahead and set those. So, set the masks. And the way you would do this is you would target the element, you would say inputmask then you would specify the mask in our case for the number. Let's have a look at the what the credit card number structure is, and I'm using a website here or a page from free format or dot com. As I was saying we are only accepting Visa, MasterCard, and American Express. And American Express has a length of fifteen digits, Master Card between 16 and 19, and these are between 13 and 16. So we want to have at least 13 digits with the rest until 19 optional. Right. So, the way we do that is very simple, we count four we leave a space, and this is the format that will be used on the inputs and the nine represents the it basically it's between zero and nine. So we're gonna do another one not a group. So we have 8, 12, 13 so there is the minimum. Now we're gonna do some square brackets, and these represent the optional values and again 999 that's what, 16? And then, another optional, 999 until the rest of the 19 digits. And then, we can also specify some options here, like the placeholder, because by default, the placeholder for this is underscore and we can set the placeholder to be an empty space. Now let's do a refresh here, and you notice how our card number field behaves now, if I enter letters it doesn't accept them, but if I enter numbers it's gonna accept them in a fashion like this which is exactly what we want. So we have the first two groups that's 8, 9 10, 11, 12, 13. So that's the minimum. And then that's 16, and then three more until 19. So our mask works properly. Now let's see about the expiration date. Expiration date has a much simpler impact mass is gonna be M M slash four Ys, and it's gonna look something like this. Again it only accepts digits. And it can enter your date very easily like this. And the CVV has three or four digits the mask here is very simple. So let's copy this one here. We'll do CVV input mask and we'll do 999 with an optional digit there, and we'll keep the same placeholder let's have a look. Again only accepting digits 111 and four maximum. Let's move on by focusing the first field on page load, and we're gonna say number, focus and there you go. Now normally how I would do this is I would to go to the first field. I would enter my credit card number. And then I would either tab or use my mouse to select another field. But let's make it a little bit more interesting. So once I complete filling in a field for example card number, we're going to do validation and if the field validates we'll automatically focus the next field. We are gonna enter the date, we validate it and if it's valid, we'll automatically focus the next field, which is CVV. Now, if one of these fields is not valid, we're gonna add an error class. And the first two fields will actually be hidden at first. And once we validate the credit card number, we're going to show the expiration date field, and we're going to focus it. So let's see how we're going to do that. We're going to start by creating a mechanism or a system that will allow us to know when we stopped typing. And how we're gonna do that we're gonna use a timer. And the timer is pretty simple to use. We on key up, so when we press a key and we release it that's when the key up event is triggered. So on key up, we're gonna start timer, and we're gonna reset that timer or we're actually gonna stop the timer, when we press a key. And what that allows us to do is to know when we stop typing. So if I start typing right now and I stop after a certain interval we can trigger a function, and that function will verify if that form is valid. So let's see how we do that. Let's start by defining a new variable here called cc inputs and cc inputs will reference all the elements with the class of cc input. Which if we take a look, yeah it's the number expiration date and CVV. And we are gonna say this CC inputs key up, we're gonna have a function with a parameter called e or event or you can call it whatever you want. And we do this so we can grab the key code of the key we pressed. You'll see why in just a little bit. Now we also need to set the timer interval. Let's do that like 1000 this is a millisecond, so this means one second and also the timer now here is how it gonna work. First of all we gonna clear time out timer, because every time we press a key and we do that key up event we want to clear or stop the previous timer so we start fresh every time, and then we gonna do a timer equals set time out here we can pass in a function that will be triggered when the timeout is complete. So after we finish typing, we're going to trigger the finish typing function, and then will set the timer interval. So this means after the timer interval trigger the finish typing function. Now the set timeout function allows us to pass in as many parameters as we want to be finish typing function, and it will do this right here. First of all we're going to send the ID of the input that we typed on. So we're gonna say this Attr ID. And the second parameter will be the value of this ID, and we're going to use these for validation. So this Val. Now we also have to write the key down function and on key down we stopped the current timer so we're going to do ccinputs. Key down, and we're going to say a clear timeout timer. Now let's go ahead and write the finished typing function so we're going to see function, finishTyping. We received two parameters here Id and value and depending on which field we are on we're gonna do different things and for that we're actually going to use a switch statement, so, we're going to say switch based on the id, the case. We can have either cc-number, and we'll do break, or we can have cc-expiration-date or cc-cvv. Let's go ahead and do some console logs here just to make sure we're in the right place, to cc-number, expiration-date and cvv. Now let's give this a try, and let's of course open the console. OK so card number, let's type and after one second the finish typing function is triggers so this works. Probably less type some more. And as you can see if I just keep on typing, our function is never triggered because the timer gets continuously reset, but once I stop after one second the finish typing function is triggered again. Let's see about the expiration date I only type once and I get that and then I tab and I get to the CVV. Now here's the problem, because I used the tab and this registered as a key up event, and of course as a key down but the most important thing is it triggered our finish typing function, and we don't want that, and also we don't want Shift Tab. So if we do Shift Tab, and we come back to the previous field, this also registered look CC expiration date. It also registered as a key up event, and it triggered our finish typing function. So the way to fix this, is to go in here, and we're gonna add a condition. If e or our typing event key code is different than 9, and our key code is different than 16, and it's actually here is quotes here. Then we're going to use a cuter code. So this means the four key code is different than nine or 16, which are the codes for a tab and shift tab. Then we're gonna execute our code, otherwise, don't do anything. So, now it will come back and we tab to the next item, we can see that no key up event is registered. And even if I do shift tab, we don't get any undesired triggers. So that's cool. Now we're going to leave the finish typing function just like this completed in the next lesson, but for now let's see what what kind of preparation we still need to do. First First, let's add the active class to the spans right here card number expiration date and security code. So when we focus on one of these fields we're going to add in that class to the corresponding spans and when we trigger to blur events. So when we move away from one field, just remove that active class from that specific item, so we're going to say. CcInputs.focus, we'll have a function, and we're going to say title dash plus this attr, Id, add class active. So here's what's going on. Our spans have an id of title dashed CC number, CC expiration date, CC CCV, which are exactly the ids of our fields. So what we're doing basically was saying when we focus one of these inputs, get the title dash plus ID so in our case title-cc number for example add class active. Now on field blur. We want to remove all the active classes from all of the Spence. So we're going to say CC inputs blur. We're gonna target the H. to spends an organ or remove the class of active. Now here we actually need A D, assign sorry about that. And now let's do a refresh, and you'll see that when I focus this field. We have the class of active on the number when I focus this one. We have the class of active on the expiration date, and same goes for this one. And when I implore, all of these classes are removed. Now the last thing we have to do is make sure that this payment button doesn't do anything if it's disabled. So, going here and we'll say payment button, on click function we're going to pass an event. And that's all we can do, prevent default. So we're preventing the default behavior of that anchor tag, has, and that if this hasClass disabled, then we're gonna return false. And that will immediately take us out of the function. Otherwise if we can pass this step, then what we're going to do is say, card form so that. So by default this button has the class of disable. So if I click it now, nothing will happen as you can see no form is being submit which is exactly what we want. Now this is pretty much all the jealous script that we're gonna write in this lesson, we've prepared things nicely. The form already has a working mask, It has a working mechanism for when we finish typing, were triggering the active class on these spans in the title. So everything is working except the most important part, which is the form of validation but we'll cover that in the next lesson.

Back to the top