Email Id Validation In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Pragati
In this article we will show you the solution of email id validation in JavaScript, an open-source programming language is JavaScript. It is made for developing web-based apps.
It is significantly quicker than other languages since it is lightweight and interpretable.
Web apps with appealing designs are made with JavaScript. Now move to the Email id validation in JavaScript.
Step By Step Guide On Email ID Validation In JavaScript :-
A programming language called JavaScript is used to create incredibly beautiful webpages. In addition to giving your website a nice appearance, it is also utilised for HTML form validation.
A form’s validation, especially email validation, is a crucial component that ensures the user only submits true information.
The user experience of a web application greatly benefits from email validation in JavaScript.
The client-side of the application’s validation ensures that only valid data is sent from the client to the server while assisting with form entry.
How does validation work?
The process of confirming the user's inputted values is known as validation.
It contributes significantly to online apps and improves the user experience as a whole. Email, passwords, dates, phone numbers, and a variety of other fields are all validatable.
Due to faster data processing than server-side validation, JavaScript is used to validate form data on the client-side of a web application, which expedites the validation process.
How to use JavaScript for email validation
A crucial aspect of validating an HTML form is email validation.
A string of ASCII letters, or a subset of them, called an email is divided into two halves by the @ sign.
The first portion is made up of personal data, while the second part is the domain name where the email is registered.
Each of the two parts of an email address is made up of a combination of ASCII characters and is separated by the "@" sign.
The first section of an email often indicates the user's personal information and includes the following.
- Use both lowercase (A-Z) and capital letters (a-z).
- Number of Digits (0-9).
- Unique characters such as! # $ % ^ & * – = { } | ~.
- A period. (It cannot be the first or last character, and a full stop cannot be used twice in a row.)
In addition, the domain name—the portion of the email that follows the @ symbol—can include letters, numbers, hyphens, and dots.
HTML Code :-
<!DOCTYPE html> <html> <body onload='document.form1.text1.focus()'> <div> <h3 class="h3">Enter your email address</h3> <form name="form1"> <input type='text' name='text1'/> <br> <input type="submit" name="submit" value="Submit" onclick="validateEmail(document.form1.text1)"/> </form> </div> <script src="email-validation.js"></script> </body> </html>
CSS :-
.h3 {
margin-left: 38px;
}
input {
font-size: 20pX;
}
input:focus, textarea:focus
{
background-color: whitesmoke;
}
input submit {
font-size: 12px;
}
Javascript :-
functionvalidateEmail(inputText)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(inputText.value.match(mailformat))
{
alert("Valid email address!");
document.form1.text1.focus();
returntrue;
}
else
{
alert("Invalid email address!");
document.form1.text1.focus();
returnfalse;
}
}
- We begin our HTML code using the HTML and BODY tags.
- To set the attention to the form’s text field, we utilise the nload command in the BODY element.
- We then use the h3 tag to print that text. Your email address.
- Next, we launch the form with the name form1. The text field is then made available for us to enter some stuff.
- The user will enter their email address in the input field we have constructed, and after they click the submit button, the entered email is sent to the validateEmail() method to be verified.
- Next, we utilise the form> tag to close the form.
- Next, we link our HTML code or JS script.
- Using the body> & html> tags, we then close our HTML code.
- The CSS file is then displayed. We offer styles in this section to make our website interactive.
- The JS code is now visible.
- You can see that we created a function called functionvalidateEmail in the js code.
- The regular phrase /w+([.-]?w+)*@w+([.-]?w+)*(.w2,3)+$/ is then used to validate an email. Then, if/else statements are used to define that if the user enters a valid email address, an alert message confirming the email address’ validity will be generated, and if the user enters an invalid email address, the alert message will let the user know about it.
Conclusion :-
As a result, we have successfully learned about the javascript notion of email validation.
We also discovered how important email address validation is in preventing the creation of invalid email addresses.
In this article, the process of determining if an email address is valid or not is discussed with code.
If the email address entered is invalid, the system will check it and let the user know.
I hope this article on email id validation in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
