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

2.4 Form Validation

In this lesson, we’ll take things up a level. We’re going to use various techniques for validating the form fields, beginning with the credit card number, which we’ll validate using something called “Luhn’s algorithm”.

Related links:

2.4 Form Validation

Hello and welcome to lesson number four of this course where, we'll validate the form fields. And we'll start with a credit number. To validate it we'll use something called Luhns formula, or Luhns algorithm, and that has a few steps that you need to go through to validate. So first we have an example here from from the free for matter page. First here is the original credit card number. The first step, we drop the last digit and here is the number without it and then we reverse the number. Then we multiply the odd digits by two so five multiplied by two nine multiplied by two, and so on, and be careful here. It's not the odd digits just themselves it's the digits in the odd positions. So we have position one three five and so on, and then we from those digits we subtract nine from the numbers that are over nine. So ten is over nine we subtract nine and we get one, and we do the same for the rest and we get this number. Then we add all of these digits and we get a number here which is 85 and then we do modulo ten, and we get the five, the last digit now. This we compare to the digit that we dropped in the initial step and if there are the same, then that credit number is valid. Now, we could write this in JavaScript, but what we're gonna do is we're gonna use DiegoSalazar's code here, it's a JavaScript told validate credit card. J.S. It's a JavaScript piece of code actually and it looks something like this. And this works with all the credit card numbers that I've tested so it's really great. Now a big thanks to DiegoSalazar here let's go ahead and grab this code And we'll paste it right here on the top. We'll add a little thank you note here and now that we have a function that can validate a credit card number. Let's go ahead and implement that right here in our finish typing function. Now, the first thing we'll do is declare a variable here called the validation value and that's going to be equal to value, which is the parameter of our function replace and we'll use a regular expression here that will strip away any whitespace characters, and remember we're using an input mask, which adds whitespace characters. So, to make sure we are not getting a number with whitespace, we're doing this and this validation value actually we're gonna use it for all of our cases here. So for the number, for the expiration date and for the CVV. Now once we have that we're gonna do the following. We're gonna declare three more variables in our main function here. And these are variables used to determine whether or not we have errors on some fields, and we're gonna say a number OK, expiration date OK, and CVV OK and we're gonna initialize these with false. Now here in our case we're gonna start with this if our validation value length is higher than zero, then we can start Using the VAL the Diego's function to validate the credit card number, and we're going to say a number okay equals valid credit card, and we're going to pass and our validation value. So let's do a quick check. Let's do a console log for Number OK, refresh and let's see let's put it in like and around. The number and we get an error here validation value length is not a function. Okay so validate. Sorry. There we are. That's your work. Let's try this again okay. So, this is not a valid credit card number, but, let's get a valid credit card number. Let's get a visa for example. By the way, these are credit card numbers that do not work, of course these are just for testing. So, let's grab the visa one from there, let's paste that in and now we get true. So, this is a valid, if we delete that It's also valid. But this is not valid and let's grab this cover, This is a valid, what else, Visa Electron maybe also valid. Maestro, also valid. So as you can see, the script for validating works properly. Now, we haven't written the conditions for only accepting certain Card types will do that at the very end. But for now here's what's going to happen. If the credit card number is valid then we want to move on to the next item if it's not valid. We want to add an error class, to that particular field if number OK. Then will remove the class of error from the number just in case there is a class of error, and it will focus the expiration date else will add the class of error to our number. All right, so let's see how this works. Let's do a quick inspection here. Okay, so we'll do a quick number here. This should add the error class to orient correct. But if we base then, a valid number, there we go, you see that we don't have the header class anymore. And our script automatically focuses the next expiration date. Cool! Now let's see about the expiration date. Now, when it comes to the expiration date we have to be careful about the format of course we want the MM/, four Ys, so month slash year. But also we cannot accept a card whose expiration date is Is in the past basically or this month. So if the card expires this month we cannot accept it. So our expiration date must be at least a one month ahead of the current date. So we're gonna start with a function there called validExpirationDate and organise a receive a date has a parameter. Now, here's how we're going to do this. We're going to grab the current month and year. So, we're going to define some variables, we'll get the current date Which equals to new date. And then currentMonth equals to currentDate getMonth, to which will add a plus one, because this is zero based index it uses as zero based index. And then currentYear will be equal to current Dat.getFullYear, then we'll have the expirationMonth equal to. Now the date is a string basically in the format that I've just mentioned. So the string is zero based to get the month we need to get the characters on the zero and one positions, and to get the year we need to get the characters starting from the third position. So it's, for example, zero one slash two thousand and eleven. Zero one is on position zero and one, and two thousand and eleven starts at position three, because position two is occupied by the slash character. So, expiration month will be equal to number, so we were doing a conversion from string to number, date.substr 0, 2. So we start at position 0 and we move on two positions, and then expiration year will be equal to again, number we're converting it, date, sub string. We start at position 3 and we're going for the length of our date. All right so now that we have our variables we'll do a couple of checks. So when is the expiration date invalid? Well it's invalid if the year is the same and the month is the same. So if the expiration date is in this month it's no good or if the years or the expression year is smaller and then the current year. We're gonna do this if expiration the year is smaller than the current year. So that's the first condition or the expiration the year is equal to the current year, and the expiration month is smaller or equal than the current month, then it will return false, otherwise, we return true. Okay, so now we'll go in here, delete this and just to make sure that our date doesn't have the M or Y characters that are found in the mask. We'll do a check for those first, if the validation value index case of M, or y equals to minus one. Then that means that the m or y characters are not found in our validation value and we can proceed. So we're going to do expiration date, OK equals valid expiration date, validation value, and if expiration date, OK. Then we gonna do something similar to what we did on the button. We gonna say expiration date remove class error, and we gonna focus the C.S.V. Else expiration Date addClass( "error" ). Okay, let's give this a try. Let's do a refresh and watch the expiration date field here for errors. So when we type something if we just do 02 nothing happens because we still have the Y character from the mask. So if we do like 2011 let's see. Then, we get an error, because 2011 is way back. But if we do 2016, we still get an error, because it's the same meter but 02 is smaller than the current month which is June. So, if we put June here 06 It's still an error if we put L7 then that's correct so our script will move on to the next field great. Now the CVV is very simple, the only check we have to make for it is that it has at least three Digits. So, let's go ahead and write that function. So function valid CVV and it will return CVV length higher than two. So it returns either true or false. Now in here, we're gonna do something very similar to you the rest of the code. We get the result of the function in the CVV OK variable, if that's true. We remove the class of error and we focus the payment button else we add the class of error. Let's try it out. If I just do one and one then we get an error but if I do three digits Then that's correct and the payment button is focused. Now, once all of this is done, once the function goes through all of the cases here, we have to update the payment button status, because if we get an error somewhere, then we have to disable the button. But if all of the fields have valid values then we have to enable it so the form can be submitted. So at the very end here after. Our switch we're gonna say this if number OK, and expiration date OK, and CVO, OK then payment button we're gonna remove the class of the disabled else we're gonna add the class and disabled. So now let's do our refresh. Let's get some valid values in here, 2016 and 111. Okay, so as you can see now we have no visible class on the Submit payment button. And if we, A re-enter some information and some of the fields, and we make them invalid like changing the year here now so that's invalid, now the payment button is disabled to once again so let's do this, and let's do this, and let's submit the form. So there you have it. That is all the validation done. As you can see it works properly the cards are validated properly the expiration date the CVV, and the main process of our page is now complete. Now we can start styling the page, and we're gonna do that in the next lesson.

Back to the top