Javascript Email Validations

JAVASCRIPT VALIDATION

Javascript Email Validations

(00:00)

Hello guys, welcome to our series of Javascript. In our last segment we saw how to validate form. If our input field is blank, if the length of password is short, entered input is not a number and we require a number, if both the passwords are not matching we validated all this. I hope you have practiced all the three practicals which we did in the last segment.

We will continue the same form validation today also. Today we will see how to validate email in Javascript, i.e. email validation using Javascript. So basically what is in email? In email two things are mandatory, or we can say three but mostly 'at' and 'dot' sign is mandatory, there are some criteria related to email, like email id must contain the ‘at’ and ‘dot’ character, there must be at least one character before and after the 'at' sign, it means before 'at' we have a word, and after 'at' we have domain name, so the second line indicates that before 'at' and after 'at' there should be a minimum of one character.

Lastly, there must be at least two characters after 'dot', so mostly after 'dot' we have a domain name, like 'dot' com, 'dot' name, 'dot' org, 'dot' br, etc. So here we need at least two characters after 'dot', this is our email’s validation, like how we can validate email, if we take all these three things in consideration then how can we generate an email validation through these three, that we will see today.

This is our program we will check after 'at' and before 'at' in this, so for that what will we do? First, we will open sublime text, in sublime text we will copy our last program, we will remove all the excess things from our program, and this is our form, so let’s save it as email… validation… Now what do we have to do here? We have to validate email, so we need an input field in which we will add email, and we will add a button to click.

So here we will write email and this is our input field, and in type we will write email, but if I write email then it will be validated automatically, but I have to validate this through my three criteria, means I don’t have to validate this through default email input. So in that case, here I will add text, here I will write an email… (pause 4 sec, typing) and two times br input, type equal to, submit… (pause 3 sec, typing) value submit… save… and now if run this program… then this is my program and here we have email… and submit button here, here it will empty.

Now my criteria, I need two things, first it should contain 'at', and second it should contain 'dot', so here I will take the position of 'at' and 'dot', so in my validate function, first what will I take? Let’s say I take two variables, the first will be my value from email so, variable email equal to document 'dot' my form 'dot' my email, 'dot' value so here my value came into my email, so now I have to perform validation on this string email, to check is the 'at' sign is present or not and 'dot' sign is present or not?

When you have to check whether a character’s existence, means whether my character exists in string or not? So for that we can go back to our string object, in which we learned many methods from those, we will see one method today, which is index of method, which will return us greater than 1, if my specified character is present in the string, means wherever my 'at' sign will be present I will get that index, if my specified character or 'at' sign does not exist then -1 will be returned to us.

(05:07)

So if I am searching for some character and I am getting -1 then, it indicates my sign or character is not present in the string, but if I am getting greater than 1 or greater than zero, that indicates the sign exists in the string, where it is present? Whatever number I will get, at that position the sign will be present. So for that what will we do? First var, we need two things, i.e. 'at' and 'dot', so I will represent 'at' by at, so at… position equal to… whatever my string is, so that is… email dot... index, of, this is my method, and what do I want to check? That is my 'at' sign, similarly next is, 'dot' so this is 'dot' and 'dot' here as well, so what will “index of” return to us? If 'at' and 'dot' are present, then their position will be stored in this two variables, now if they are not present, means 'at' and 'dot' sign is not present, then my email which I have entered is wrong.

So here what will I get checked? If the value is less than 1, which indicates 'at' and 'dot' is not present, so this indicates my “atposition” is less than 1, if the returned number is less than 1 or if my atposition, what was our second condition after 'at' position? If we look in the slide I want a minimum of two positions after 'at' and before 'at', two characters are necessary, so how will we check that?

So here we will take 'dot' position, is less than, atposition, plus 2, which indicates after 'at' two characters are present, and after that 'dot' is present, or and we will check along with this itself, dot position plus 2 is greater than or equal to, I will leave some space here, greater than or equal to… the length of our email… which indicates, here what have we written? 'dot position will come after adding 2, after 'at' position, and second whatever is generated at adding 2, in 'dot position that is greater than or equal to our length of email.

Means here we have checked three conditions here , if it less than 1, then 'at' exists, 'dot' position also exists, we have checked that directly in these two, how? Plus 2, and two characters after 'at' position, and after that 'dot' will come, and along with that two characters after 'dot', which will be greater than our email length. If all these criteria are not fulfilled… then our email is wrong. How? let’s say I open the notepad, in the notepad I will write… (pause 4 sec, typing) what does this indicate here? What are our conditions? 'at' position is less than 1, means it is minus, it does not exist plus, 'dot' is less than 'at' position 2, means 'dot' position is coming earlier, after two positions, after 'at' position, means if I add plus 2 in this, then my 'dot' position comes somewhere down, it means, first my 'dot' is occurring and after that 'at' is occurring. So that indicates, it is written in a wrong way, it indicates it is written in this way, “abcd dot mail at com.”

So even if I add 2, still the position of 'dot' is smaller, meaning 'dot' is coming first and 'at' is coming later, but the condition of the email says otherwise, that 'at' should come first and 'dot' will come later. Then comes 'dot' position plus 2, greater than or equal to email length, means whatever is the position of 'dot', if I add 2 in it, still the length of total email is greater than that, so that is not possible after adding 2, this should be less than our email length so if all these three conditions are fulfilled, it means my email is not in its pattern, so for that what will we print? We will print an alert… email is not, correct… okay, so if it is not correct, then what do we return always, false and here we don’t need true, so save, and we will simply run this program.

(10:22)

Let’s say I write here, A C V B G, submit so email is not correct. Okay, now I will write D F G 'at', submit email is not correct, now I am writing D F G ‘at’ D F G, i am writing anything, submit, it is not correct, 'dot', submit, not correct, one character, submit, not correct, one more character, submitted, means now our condition is right. After 'dot' what was our condition? 'at' and 'dot' should be present, so yes, we saw 'at' and 'dot' were present. Must be at least one character before and after 'at', so yes, when I added characters is accepted. Now let’s say, I write “a 'at' a dot com”, submit, so this is getting submitted, means our condition at least one character after and before 'at' has been successfully accepted here, so it’s like a 'at' a, submit then we will get error, because 'dot' is not present, means if I write only 'at' 'dot' com, as we have not added character before and after, so this is wrong, so all the mentioned conditions are getting fulfilled, and the program which I have created for email validation is running successfully.

So all our conditions are getting fulfilled. We have 'at', we have 'dot' characters are coming, domain name is getting added, so here we have completed our email validation. So guys we took email validation separately, because it is a bit tricky, here we have to add logic and we have to use methods like “index of” so therefore we conducted it in a different segment for email validation. So guys here our form validation finishes, how we can validate form using Javascript, here we learned two things from last segment and this segment, that whenever we need to validate form we use Javascript, with help of Javascript we can properly complete validation of form, we took different controls, text in name telephone number, password, email id etc. and we learned how to validate all these.

So guys, I request you to practice today’s practical and while practicing if you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your queries.. Our next segment is a very important segment, here means in today’s segment our validation of forms with help of Java script finishes.

Our next module that we have is on cookies. We will be starting from introduction to cookies in the next segment. So see you in the next segment guys.

Thank you.

(video duration- 13 minutes 38 seconds)