title
#31 Email Validation in JavaScript

description

detail
{'title': '#31 Email Validation in JavaScript', 'heatmap': [{'end': 546.475, 'start': 509.854, 'weight': 0.801}, {'end': 641.476, 'start': 622.371, 'weight': 0.763}, {'end': 960.646, 'start': 921.588, 'weight': 0.834}], 'summary': 'Covers javascript regular expressions for email validation, demonstrating email and mobile number validations, creating regular expressions for email validation, and discussing character sets and special characters in regular expressions for comprehensive email validation.', 'chapters': [{'end': 131.655, 'segs': [{'end': 61.482, 'src': 'embed', 'start': 36.15, 'weight': 0, 'content': [{'end': 43.453, 'text': 'And is this tutorial is important because email and mobile number validations are pretty much used a lot in many cases, in fact, in projects also.', 'start': 36.15, 'duration': 7.303}, {'end': 49.436, 'text': "So the regular expression that we are going to be looking in today for emails is kind of important and it's not very straightforward.", 'start': 43.933, 'duration': 5.503}, {'end': 52.037, 'text': "So with that being said, let's get started with today's topic.", 'start': 49.776, 'duration': 2.261}, {'end': 55.639, 'text': 'okay, so as you can see on the screen on the browser, we have some output.', 'start': 52.817, 'duration': 2.822}, {'end': 61.482, 'text': 'so we have a text box, we have a button and we are going to be inputting some email and we are going to be validating this,', 'start': 55.639, 'duration': 5.843}], 'summary': 'Importance of email and mobile number validations in projects.', 'duration': 25.332, 'max_score': 36.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vPVx-zGFh0w/pics/vPVx-zGFh0w36150.jpg'}, {'end': 113.808, 'src': 'embed', 'start': 83.992, 'weight': 2, 'content': [{'end': 86.173, 'text': 'We have a label, which is currently hidden over here.', 'start': 83.992, 'duration': 2.181}, {'end': 93.615, 'text': 'It will be visible and it will turn red and it will display invalid when the email is invalid or the regular expression does not match.', 'start': 86.513, 'duration': 7.102}, {'end': 98.517, 'text': 'And it will be green and valid when the regular expression matches right now it is hidden.', 'start': 94.295, 'duration': 4.222}, {'end': 99.457, 'text': "So it's not visible.", 'start': 98.637, 'duration': 0.82}, {'end': 104.261, 'text': 'So if I click on this button right now it is showing valid because we still have to type in some regular expression.', 'start': 100.037, 'duration': 4.224}, {'end': 107.663, 'text': 'So if I just type in A over here and hit submit it is invalid right.', 'start': 104.281, 'duration': 3.382}, {'end': 109.105, 'text': 'So this is something that is going to happen.', 'start': 107.723, 'duration': 1.382}, {'end': 113.808, 'text': 'So this is where we are actually going to be writing the complete regular expression for the email.', 'start': 109.445, 'duration': 4.363}], 'summary': 'Label will display red for invalid email, green for valid. regular expression needs to be typed in for validation.', 'duration': 29.816, 'max_score': 83.992, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vPVx-zGFh0w/pics/vPVx-zGFh0w83992.jpg'}], 'start': 5.418, 'title': 'Javascript regular expressions for email validation', 'summary': 'Discusses the importance of email and mobile number validations in javascript, focusing on creating a regular expression for email validation and demonstrating its implementation through an html form, with a focus on the relevance of regular expressions in real-world projects.', 'chapters': [{'end': 131.655, 'start': 5.418, 'title': 'Javascript regular expressions for email validation', 'summary': 'Discusses the importance of email and mobile number validations in javascript, focusing on creating a regular expression for email validation and demonstrating its implementation through an html form, with a focus on the relevance of regular expressions in real-world projects.', 'duration': 126.237, 'highlights': ["The tutorial emphasizes the importance of email and mobile number validations, highlighting their frequent use in many projects. Email and mobile number validations are widely used in projects, making the tutorial's focus on regular expressions for email validation important.", 'Demonstrating the implementation of email validation through an HTML form, including the visibility changes and color indication based on the regular expression match. The tutorial demonstrates the implementation of email validation in an HTML form, featuring visibility and color changes based on the validity of the regular expression match.', 'The tutorial discusses the creation of a complete regular expression for email validation, with a focus on its importance and complexity. The tutorial explains the process of creating a complete regular expression for email validation, highlighting its importance and complexity.']}], 'duration': 126.237, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vPVx-zGFh0w/pics/vPVx-zGFh0w5418.jpg', 'highlights': ['The tutorial emphasizes the importance of email and mobile number validations, highlighting their frequent use in many projects.', 'The tutorial discusses the creation of a complete regular expression for email validation, with a focus on its importance and complexity.', 'Demonstrating the implementation of email validation through an HTML form, including the visibility changes and color indication based on the regular expression match.']}, {'end': 525.661, 'segs': [{'end': 209.765, 'src': 'embed', 'start': 132.095, 'weight': 0, 'content': [{'end': 137.196, 'text': 'We are taking the text from the text box using the get element by ID and accessing that text box.', 'start': 132.095, 'duration': 5.101}, {'end': 140.676, 'text': 'We accessing the value that is whatever we are inputting in this text box.', 'start': 137.716, 'duration': 2.96}, {'end': 145.577, 'text': 'We are storing it in this text variable, and then we are creating a regular expression object.', 'start': 140.696, 'duration': 4.881}, {'end': 151.218, 'text': "And we're using the test method of this object and passing in the text that we just took in from the text box.", 'start': 146.057, 'duration': 5.161}, {'end': 155.242, 'text': 'and if the regular expression matches, we are showing valid.', 'start': 151.818, 'duration': 3.424}, {'end': 161.449, 'text': 'we are making the visibility as visible of this label and we are changing the color to green, and if it does not match,', 'start': 155.242, 'duration': 6.207}, {'end': 166.074, 'text': 'then we are changing the text by using the innerHTML property to invalid.', 'start': 161.449, 'duration': 4.625}, {'end': 169.478, 'text': 'we are changing the visibility as visible, but we are changing the color as red.', 'start': 166.074, 'duration': 3.404}, {'end': 171.799, 'text': 'ok, so this is the entire code.', 'start': 169.858, 'duration': 1.941}, {'end': 174.221, 'text': 'but this is something that we also did in the previous video.', 'start': 171.799, 'duration': 2.422}, {'end': 177.543, 'text': 'so if you have watched that, this is pretty basic to understand.', 'start': 174.221, 'duration': 3.322}, {'end': 181.066, 'text': 'so the only thing that we are going to be changing over here is the actual regular expression.', 'start': 177.543, 'duration': 3.523}, {'end': 185.129, 'text': "ok, so coming to this regular expression, let's just take a look at this image.", 'start': 181.066, 'duration': 4.063}, {'end': 188.131, 'text': "so when you perform email validation, it's not just one thing.", 'start': 185.129, 'duration': 3.002}, {'end': 190.953, 'text': 'so email has a particular pattern.', 'start': 188.551, 'duration': 2.402}, {'end': 194.275, 'text': 'so, as you can see, I have divided an email into four different parts.', 'start': 190.953, 'duration': 3.322}, {'end': 199.158, 'text': 'so typically an email can be divided into four different parts, or you can say patterns.', 'start': 194.275, 'duration': 4.883}, {'end': 201.7, 'text': 'so the first part is where you enter your name.', 'start': 199.158, 'duration': 2.542}, {'end': 205.542, 'text': 'so in the example you can see Tanmay and I have added digits also.', 'start': 201.7, 'duration': 3.842}, {'end': 209.765, 'text': 'so the first part can have any letters, any numbers, dots or hyphens.', 'start': 205.542, 'duration': 4.223}], 'summary': 'Code validates email input using regular expression.', 'duration': 77.67, 'max_score': 132.095, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vPVx-zGFh0w/pics/vPVx-zGFh0w132095.jpg'}, {'end': 414.278, 'src': 'embed', 'start': 388.437, 'weight': 4, 'content': [{'end': 394.979, 'text': 'according to our conditions, we can have any letters, we can have any numbers, we can have dot and we can also have hyphens.', 'start': 388.437, 'duration': 6.542}, {'end': 399.301, 'text': 'so what we are going to be doing is, as i mentioned, we are going to be splitting it into four different parts, right.', 'start': 394.979, 'duration': 4.322}, {'end': 405.083, 'text': 'so when you want to group or divide the entire regular expression into parts, you can use round brackets.', 'start': 399.301, 'duration': 5.782}, {'end': 408.044, 'text': 'so you can have four different round brackets for four parts over here.', 'start': 405.083, 'duration': 2.961}, {'end': 414.278, 'text': "So, in the first part, what I'm going to do is I'm going to use a character set, obviously because we can have complete number sets,", 'start': 409.056, 'duration': 5.222}], 'summary': 'Conditions allow letters, numbers, dot, and hyphens. expressions split into four parts using round brackets.', 'duration': 25.841, 'max_score': 388.437, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vPVx-zGFh0w/pics/vPVx-zGFh0w388437.jpg'}], 'start': 132.095, 'title': 'Text box validation process and email validation', 'summary': 'Explains the process of validating input in a text box using regular expressions and discusses the validation of email addresses, including the division of an email into four parts and the use of character sets and special characters in regular expressions.', 'chapters': [{'end': 171.799, 'start': 132.095, 'title': 'Text box validation process', 'summary': 'Explains the process of validating input in a text box using a regular expression, where valid input changes label visibility to green and invalid input changes label visibility to red.', 'duration': 39.704, 'highlights': ['The process involves accessing the input from a text box and storing it in a variable, then using a regular expression object to test the input.', "If the regular expression matches, the label visibility is set to 'visible' and the color is changed to green.", "If the regular expression does not match, the label text is changed to 'invalid', visibility is set to 'visible', and the color is changed to red."]}, {'end': 525.661, 'start': 171.799, 'title': 'Email validation and regular expressions', 'summary': "Discusses the validation of email addresses using regular expressions, dividing an email into four parts - name, '@' sign, domain name, and extension - and the use of character sets and special characters in regular expressions.", 'duration': 353.862, 'highlights': ['The chapter discusses the validation of email addresses using regular expressions. The transcript covers the process of validating email addresses using regular expressions.', "Dividing an email into four parts - name, '@' sign, domain name, and extension. It explains the division of an email address into four parts, including the name, '@' sign, domain name, and extension.", 'The use of character sets and special characters in regular expressions. It covers the usage of character sets, including ranges for letters and numbers, and the handling of special characters like dot and hyphen in regular expressions.']}], 'duration': 393.566, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vPVx-zGFh0w/pics/vPVx-zGFh0w132095.jpg', 'highlights': ['The process involves accessing the input from a text box and storing it in a variable, then using a regular expression object to test the input.', 'The chapter discusses the validation of email addresses using regular expressions. The transcript covers the process of validating email addresses using regular expressions.', "Dividing an email into four parts - name, '@' sign, domain name, and extension. It explains the division of an email address into four parts, including the name, '@' sign, domain name, and extension.", "If the regular expression matches, the label visibility is set to 'visible' and the color is changed to green.", 'The use of character sets and special characters in regular expressions. It covers the usage of character sets, including ranges for letters and numbers, and the handling of special characters like dot and hyphen in regular expressions.', "If the regular expression does not match, the label text is changed to 'invalid', visibility is set to 'visible', and the color is changed to red."]}, {'end': 1028.507, 'segs': [{'end': 546.475, 'src': 'embed', 'start': 525.661, 'weight': 2, 'content': [{'end': 535.007, 'text': 'okay. so till now, in the character set we have a to z in the small caps, we have a to z in the large caps, then we have 0 to 9 and we defined a dot.', 'start': 525.661, 'duration': 9.346}, {'end': 536.729, 'text': 'and now, lastly, we just need a hyphen.', 'start': 535.007, 'duration': 1.722}, {'end': 538.51, 'text': "so i'm just going to give hyphen over here.", 'start': 536.729, 'duration': 1.781}, {'end': 541.332, 'text': 'so this is the entire character set for our first part.', 'start': 538.51, 'duration': 2.822}, {'end': 546.475, 'text': "so let me just first cut out these brackets and let's see if this first part is validated.", 'start': 541.332, 'duration': 5.143}], 'summary': 'Defined character set includes a-z, a-z, 0-9, and dot, now adding a hyphen.', 'duration': 20.814, 'max_score': 525.661, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vPVx-zGFh0w/pics/vPVx-zGFh0w525661.jpg'}, {'end': 622.371, 'src': 'embed', 'start': 563.106, 'weight': 3, 'content': [{'end': 570.15, 'text': 'So if I type in any one single character, it is always going to be valid, but we have not yet given how many times this character should be repeated,', 'start': 563.106, 'duration': 7.044}, {'end': 572.191, 'text': 'right?. So this is just the first position.', 'start': 570.15, 'duration': 2.041}, {'end': 578.855, 'text': 'Now, technically this name that is the first part can be of any length because come on guys, we have sometimes very huge names.', 'start': 572.772, 'duration': 6.083}, {'end': 582.717, 'text': 'We have some weird usernames also sometimes in the email.', 'start': 579.375, 'duration': 3.342}, {'end': 588.221, 'text': "So what we can do is instead of giving a fixed value, let's say I just want to give a fixed value of 20.", 'start': 583.198, 'duration': 5.023}, {'end': 591.983, 'text': "So what if some guy's name is very large and it exceeds 20 characters, right?", 'start': 588.221, 'duration': 3.762}, {'end': 596.084, 'text': 'so in this case what I can do is I can actually give a hardcoded value.', 'start': 592.583, 'duration': 3.501}, {'end': 603.066, 'text': 'so I can say I want the string or the name to be 10 characters long, but then I only have to type in exactly 10 characters,', 'start': 596.084, 'duration': 6.982}, {'end': 604.587, 'text': 'otherwise it will be invalid.', 'start': 603.066, 'duration': 1.521}, {'end': 606.047, 'text': 'so I can also give a range over here.', 'start': 604.587, 'duration': 1.46}, {'end': 612.089, 'text': 'so I can say minimum 2 and maximum 10, and if it is in that range it will be valid.', 'start': 606.047, 'duration': 6.042}, {'end': 614.449, 'text': 'so you can see it is coming valid right now.', 'start': 612.089, 'duration': 2.36}, {'end': 616.11, 'text': 'but this is very hard coded values.', 'start': 614.449, 'duration': 1.661}, {'end': 622.371, 'text': 'right. the username can exceed 10 characters sometimes if you have long names or if you have some weird usernames, also right.', 'start': 616.11, 'duration': 6.261}], 'summary': 'Discusses options for character repetition and length in usernames, including fixed, range, and hardcoded values.', 'duration': 59.265, 'max_score': 563.106, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vPVx-zGFh0w/pics/vPVx-zGFh0w563106.jpg'}, {'end': 649.138, 'src': 'heatmap', 'start': 622.371, 'weight': 0.763, 'content': [{'end': 628.313, 'text': 'so instead of using this hard coded numbers, another way to go about this is just add a plus.', 'start': 622.371, 'duration': 5.942}, {'end': 633.494, 'text': 'ok. So after you define the entire character set in the square brackets, if you add a plus ahead of it,', 'start': 628.313, 'duration': 5.181}, {'end': 641.476, 'text': 'it means that this character set pattern has to be applied to at least one or more than one characters in this entire string.', 'start': 633.494, 'duration': 7.982}, {'end': 649.138, 'text': 'So now it means I can have any length of characters which have this pattern as the first part because it is in this round brackets.', 'start': 642.056, 'duration': 7.082}], 'summary': 'Using a plus sign after defining a character set in square brackets allows for at least one or more characters to match the pattern in the string.', 'duration': 26.767, 'max_score': 622.371, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vPVx-zGFh0w/pics/vPVx-zGFh0w622371.jpg'}, {'end': 864.649, 'src': 'embed', 'start': 841.017, 'weight': 0, 'content': [{'end': 847.983, 'text': 'so this regular expression is actually a proper email validation regular expression, except that extension part which is optional.', 'start': 841.017, 'duration': 6.966}, {'end': 855.174, 'text': 'so if you know that your regular expression will not have who dot in or two dots or this extra extension part,', 'start': 847.983, 'duration': 7.191}, {'end': 861.628, 'text': "and you're just looking for a single dot com or dot in or dot net, you can use this regular expression as it is.", 'start': 855.174, 'duration': 6.454}, {'end': 864.649, 'text': "but since we have this extension part, let's do that also.", 'start': 861.628, 'duration': 3.021}], 'summary': 'Regular expression for email validation with optional extension part.', 'duration': 23.632, 'max_score': 841.017, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vPVx-zGFh0w/pics/vPVx-zGFh0w841017.jpg'}, {'end': 960.646, 'src': 'heatmap', 'start': 921.588, 'weight': 0.834, 'content': [{'end': 931.391, 'text': "so if I didn't have this part, that is the last part, and if I tried to say abc-gmail.co.in, it would have given me an invalid sign.", 'start': 921.588, 'duration': 9.803}, {'end': 935.986, 'text': "so that's why we need the last part also, and this is basically the entire email validation.", 'start': 931.391, 'duration': 4.595}, {'end': 941.029, 'text': 'one last character that can be added into this regular expression is the character.', 'start': 935.986, 'duration': 5.043}, {'end': 946.753, 'text': 'so what this does is for the last entire round brackets part, that is, the extension part.', 'start': 941.029, 'duration': 5.724}, {'end': 948.113, 'text': 'it makes it optional.', 'start': 946.753, 'duration': 1.36}, {'end': 953.717, 'text': 'so this makes it optional so that whenever we enter a normal email also, even that is also validated.', 'start': 948.113, 'duration': 5.604}, {'end': 960.646, 'text': 'okay. so the purpose of this question mark is to make the pattern which is immediately right next to it as optional,', 'start': 954.218, 'duration': 6.428}], 'summary': 'Email validation regex includes optional extension for complete validation.', 'duration': 39.058, 'max_score': 921.588, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vPVx-zGFh0w/pics/vPVx-zGFh0w921588.jpg'}], 'start': 525.661, 'title': 'Character and email validation', 'summary': 'Covers the creation and validation of character sets including a to z, a to z, 0 to 9, dot, and hyphen, along with the construction of a regular expression for comprehensive email validation, including quantifiers for dynamic lengths.', 'chapters': [{'end': 622.371, 'start': 525.661, 'title': 'Character set and validation', 'summary': 'Discusses the creation of a character set including a to z in small and large caps, 0 to 9, dot, and hyphen, and addresses the validation of the character set, exploring the use of hardcoded and ranged values for character length.', 'duration': 96.71, 'highlights': ['The character set includes a to z in small and large caps, 0 to 9, dot, and hyphen, forming the entire character set for the first part.', 'The validation process is discussed, introducing the concept of defining the number of characters and the use of hardcoded values, such as fixing the length to 10 characters.', 'The need for handling variable character lengths is emphasized, suggesting the usage of ranged values, like setting a minimum of 2 characters and a maximum of 10 characters for validation.']}, {'end': 1028.507, 'start': 622.371, 'title': 'Email validation with regular expressions', 'summary': 'Explains the construction of a regular expression for email validation, including the specification of character sets, the use of quantifiers for dynamic lengths, and the optional extension part, ensuring a comprehensive email validation pattern.', 'duration': 406.136, 'highlights': ['The regular expression allows for a dynamic number of characters in the first part of the email, specified by the use of the plus sign, accommodating various username lengths. The regular expression uses a plus sign to allow a dynamic number of characters in the first part of the email, providing flexibility for different username lengths.', 'The construction of the regular expression for email validation includes the specification of character sets, such as a range from a to z (small caps), A to Z (large caps), and 0 to 9, ensuring comprehensive coverage for valid email patterns. The regular expression specifies character sets for a comprehensive coverage of valid email patterns, including ranges from a to z (small caps), A to Z (large caps), and 0 to 9.', 'The optional extension part of the regular expression is defined to ensure the validation of the email extension, allowing for a range of 2 to 20 characters, accommodating common extensions like .com and .net. The regular expression includes an optional extension part to validate the email extension, allowing for a range of 2 to 20 characters, covering common extensions like .com and .net.']}], 'duration': 502.846, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vPVx-zGFh0w/pics/vPVx-zGFh0w525661.jpg', 'highlights': ['The regular expression specifies character sets for a comprehensive coverage of valid email patterns, including ranges from a to z (small caps), A to Z (large caps), and 0 to 9.', 'The regular expression includes an optional extension part to validate the email extension, allowing for a range of 2 to 20 characters, covering common extensions like .com and .net.', 'The character set includes a to z in small and large caps, 0 to 9, dot, and hyphen, forming the entire character set for the first part.', 'The regular expression allows for a dynamic number of characters in the first part of the email, specified by the use of the plus sign, accommodating various username lengths.', 'The need for handling variable character lengths is emphasized, suggesting the usage of ranged values, like setting a minimum of 2 characters and a maximum of 10 characters for validation.', 'The validation process is discussed, introducing the concept of defining the number of characters and the use of hardcoded values, such as fixing the length to 10 characters.']}], 'highlights': ['The tutorial discusses the creation of a complete regular expression for email validation, with a focus on its importance and complexity.', 'The process involves accessing the input from a text box and storing it in a variable, then using a regular expression object to test the input.', 'The regular expression specifies character sets for a comprehensive coverage of valid email patterns, including ranges from a to z (small caps), A to Z (large caps), and 0 to 9.', 'The regular expression includes an optional extension part to validate the email extension, allowing for a range of 2 to 20 characters, covering common extensions like .com and .net.']}