Allow Phone Number Field with airSlate SignNow

Allow phone number field

[Music] hey what's going on guys done by our fatherless code earnings and in this video tutorial which is sort of like the part three of regular expressions in JavaScript we are going to be understanding repeating characters in regular expressions we are going to take a look at some special characters that can be used in regular expressions and lastly we are also going to be performing validations for a proper mobile number okay so these are the three things that we are going to be doing in this video tutorial so as you can see on the screen I have already opened up the regex 101.com website wherein you can validate for a particular regular expression you've seen this website in the first part of regular expressions also so what we will do is we will first have to understand the regular expression on this website because this will give us an exact idea about how the regular expression works and then we will take this regular expression and go to the coding part to perform the actual coding in JavaScript so in the previous video we saw character sets and ranges so when you want to give a particular character set you give square brackets and inside that you specify the character set so right now what I specified is our regular expression can have either a B or C as a character so if I type in E a is valid you can see e is highlighted as blue if I type in B B is also highlighted separately if and I've been C C is also highlighted but if I died of any other text it is not getting highlighted by the way I've turned on the global flag which means that it will return all the matches it finds and if you turn it off it will return only the first match right now let's keep it on so this was character set and if you want to give a character range you just have to see a - and the starting and ending values for anything between e 2zii will be matched so I see ABCD efg so we are checking for only one character over here that is why individually every character is being highlighted so this is what we saw in the previous video so let's do this for a mobile number let's try to validate Indian mobile number so now what we are going to be doing is we know that the first value of Indian mobile number has to be something between 7 to 9 right so the first number can be 7 8 or 9 I am not sure if we have numbers starting from 6 I don't think so in India but we have numbers starting from 7 8 and 9 so this is the first number and then we have 9 more numbers right so they can be anything between zero to nine so now I can say zero to nine so this is for the second position in the string right in the entire string so the first position can be occupied by a number which is between seven to nine the second position can be occupied between zero to nine again the third position can be occupied between zero to nine and this goes on and on right so you can copy this and I can paste it for the fourth position for the fifth sixth seventh eighth and ninth so this is valid this will work let's try to input a number and let's see if this works so I'm going to see so I just inputted a ten digit number but it is not getting highlighted because the first character that is the first digit is not between seven and nine so let's change that when I do seven I am getting a highlighted asian of the fourth ten digits because I specified only nine places so let me just copy this zero to nine one more time and they were you can get the entire number but this is still not a proper validation so why is it not a proper validation so if I type in anything over here also it is still getting highlighted right so what we are looking for is a particular pattern in the entire string this is not we want what we want is we want a particular ten digit number so it has to be only ten digits so if you type anything after the ten digits it should be invalid but right now if you see the hydration is on which means it is valid right so this is an issue which we will tackle in a minute let's see one more thing before that so instead of typing the 0 - 9 0 - 9 0 - 9 n number of times what I can do is when there are certain rebooting characters I can just specify the number of times it is repeated in curly braces so this 0 - 9 is repeated 9 times right so in this curly braces I can say 9 which means that this 0 - mine number has to be repeated nine more times so this is equivalent to writing this entire thing 0 to minus 0 to 9 9 different times so instead of that this is very easy right and this is also valid with characters so if I say e 2zii even this will work but now the string has to be 7 to 9 and then followed by some characters okay so this is for repeating characters you can use curly braces and the number of times you wanted to be repeated this was one thing I also wanted to talk about some special characters that can be used instead of numbers or words so when you want to specify some digits let's say you want to specify zero to nine right so instead of writing zero to nine in the square brackets what you can do is you can replace this zero to nine with a backward slash and D so this is the same thing so let me just go to the coding part and I will tell you what it is so there are many special characters but right now we're just looking at four different ones so backward slash D means match any digit which is equal to 0 to 9 so instead of writing 0 to 9 in square brackets for that range if you just write it in slash D it means one in the same similarly when you want to match any word character that is e to Z in small caps using large caps that is capital caps 0 to 9 and under school you can simply write /w so coming to the website instead of having something like e to Z then e to Z so this is valid this is valid right so instead of this you can also write backward slash W okay similarly s is for white spaces that is for example spaces and tabs if you want to match species and tabs that is if you want your regular expression string to match for a particular space or a particular tab you can see slash s or if you are just looking for a tab you can use slash t okay so these are the four generally used or most typically used special keywords and now let's move on with the actual mobile number validation so up until now what we did is we said that you want a range of seven to nine for the first digit then we said we want all the digits for nine more times right so this is something that we have achieved up until now but the problem here is let's say we enter on proper number seven and then nine times eight so this is valid however if you type something else before and after it it is still getting validated so now let's try to use this in our actual code so I'm gonna just copy this regular expression so in the coding part I have already written some code let me just quickly explain to you it is pretty much similar to what we did in the previous two videos so if you watch that this would be very easy to understand so you are I have input type with ID text 1 I have named the placeholder a cell phone because we are validating for cell phone then we have a label which is hidden so it's not visible as of now we will make it visible when we get a valid or invalid entry I've given it an ID of LPL text and we have a button which is named as submit it is not a type of submit button it is a basic button but when we click on it we call the validate function so in the validate function I am taking the text into a variable name text from document dot get element by ID by accessing the text 1 so text 1 is the ID given to the input type so that's how I'm accessing the value whatever you enter inside this text box and then I'm passing the regular expression over your so this is where we want to pass the new regular expression that we just typed in the website and in the if-else what I'm checking is if we get a match so this is the test method which returns true if we get a match of this pattern in that string and that string is stored inside this text variable rate so whatever we enter over here in the text box gets into this text variable we are passing that text variable inside this test method this test method will check if this regular expression pattern is there inside this text if it is there then what I am doing is I am accessing the label which is having an idea of LBL text so this is that label I am accessing the inner HTML which means I am accessing the value which is inside the label there is a text inside of the label which is invalid currently and I'm changing it to valid the next thing that I am doing is I am making it visible Max is in the style or visibility attribute and lastly I am changing the color to green so this is basically CSS manipulation and if it is not matching then I am doing the text as invalid I'm still keeping it visible but I am changing the color to red okay so I'm not popping up an alert box I am doing it a little bit differently and I hope you've got the idea you can pause the video if you want to type it out but this is pretty basic that we've done in the previous we'll use also okay so let's type in a number and let's see if it is valid or invalid so again typing in 9 and then 9 times 7 so this is valid right because we started off with 9 let's say if we start off with 0 this would be invalid right because the first digit has to be between 7 to 9 so let's again make it 7 and this is however the problem arises when even if I type in some other text before and after this it is still going to be showing us valid see if I'm clicking on it it is still valid so we are not performing cell phone or mobile number of validation properly over here so what is being missing is the start and end of the regular expression that is we want to define that it has to be only ten digit numbers right so we cannot have eleven digits so we cannot have less than ten digit also so how do we specify this so this is specified by two different special characters which defines the start and the end of the string that is the start in the end of the pattern so in the regular expression the start of the regular expression is given by a caret sign so do not confuse this caret sign with the caret sign which was inside so when you have a caret sign inside the square brackets and then you have something so this caret sign means that seven to nine cannot exist as the false digit okay so when you have a caret sign inside a square bracket whatever you type in inside the square bracket after the caret sign cannot be used as the first location or the location wherever you have specified that square brackets okay so let me just show it to you so when I have caret sign inside the square bracket and I have seven to nine and if I type in seven and then nine times nine this will give me invalid because now I do not want seven to nine eyes the Foy's digit so this is basically negating that okay so when you want to exclude something you type in carrot inside square records if I remove this and if I try to again input the same number in submit it will give me valid so don't confuse this caret with the outside caret so when you have an outside caret it it turns blue so this basically points the first or the starting point of your regular expression so now if I input the number again and submit it I am still getting valid but if I have anything at the start now it will give me invalid okay so we have defined the starting point and it has to be starting with seven to nine right but here the string is starting with sdhd so that's where it is giving us invalid so one part is done but what about the end of the string so if I type in something over here it will still give me valued so this is where another character comes in and that is dollar so this dollar denotes the end of the string okay so now if I enter this number again and if I try to add some value at the end and at the start it will give me invalid if I remove this and if I still have something else at the end that will still give me invalid so only when I remove this mgmg extra and have ten digits which are having this pattern that is the forge digit has to be between seven to nine and followed by digits nine times only then it is going to give me value so now we have properly done cellphone validation so I hope you understood what is this carrot sign and dollar sign for this carrot saying denotes the start of the regular expression and this dollar sign basically denotes the end of the regular expression in simple words and whatever we have inside has to be exactly in that pattern so in this case what we have inside is the Forge digit has to be between 7 to 9 and then we using this slash digit instead of this slash D you can also have 0 to 9 right so this is one in the same that's what we discussed over here and now if you enter anything which matches this pattern we will get valid okay so this most proper mobile number validation now this was specifically for Indian mobile numbers because it starts from 7 to 9 if you are from some other country obviously your regular expression will be different and one last thing that I would want you guys to try out is try out a regular expression wherein the first character has to be between 5 to 9 okay then the next 8 characters so first character has to be between 5 to 9 next 8 characters have to be between A to Z and last character has to be a zero okay so try out this regular expression and what you can do is you can just comment out the regular expression in the comment section below and then I'll second let you know if it's correct or not you can also check that on the website which is red X 101 dot-com so obviously you will get to know whether it is correct or not but let me know in the comments if you are able to solve this regular expression example so yeah that's it for this video guys I hope you got an idea about how to validate mobile numbers using regular expressions in JavaScript and we also saw some different special characters and how to perform repeating numbers so thanks for watching see you guys in the next video peace