Email Verification Message


In this article, we are looking out email Verification. We are using javascript regular expression to verify the email. In this lesson, we validate email and show error messages to the user to first validate email format. If you specify invalid email in the email textbox then you will see the error message on the top. So we are using javascript to validate email format and for an empty textbox.

In this article, we are creating this.

Email Verification

Here in the above image, you will see we specify invalid email error message to the user. We will also validate the empty text box. So basically we are creating a two verification require field and email format verification.

So let’s Jump Into the code and understand how it’s done.

Creating a Project

We will first create a project in the visual code editor. If you did not install the visual code editor in your local machine then just install it. After installing it if you want to create a live server then install live server extension.  Then In the visual code, open the project folder in the visual code editor.

In this folder create two files.Index.html and Style.css. In the index.html file, we design our template and in the style.css file, we style it.

Index.html

In index.html we insert simple HTML5 snippets which contain viewport, metadata, and title. You do not worry about this if you are not wanted to create a responsive website. In the following code just look out how we create the design.

In the above code,

  • we created an h3 heading tag with margin-bottom and put this heading in the division with text center and margin-top class.
  • after that, we create a row and put a new column inside it. Then we specify offset to the column to add some margin.
  • Then we will create a new label for the error message and then put this error message inside validate class of div.
  • we will specify class error to the label for access it.
  • Then we will create a new input text box and specify id email and placeholder email. You can choose your own id and placeholder to it. we will also add form-control bootstrap class to it.
  • Now we will style these HTML elements.

Style.css

In this file, we style the HTML elements.

Just import this code into Style.css file. In this code, we created a tooltip design using .errro class.

  • We will first create tooltip design using error class and then we create after selector. Using after selector we create a simple triangle and put this triangle on the bottom left corner.

Main.js

After completing the design we will create main.js file. We are creating this file for validating the user. We will first link Jquery.min.js file to index.html and then we will link main.js file.

Before the closing </body> tag just put this code. In this code we link the jquery.min.js file and then link main.js file. To link .js files you need to use script tag.

Let’s look at the code of email verification.

What we have done here

  • We first create the document.ready() function. This function will execute just after the DOM element are completely loaded.
  • In this function, we create focus-out event. when the user focuses on the email text box.
  • In this event we create if statement. if statement we will call the verification function.
  • So we will first create a function outside of the document.ready function. We create validateEmail function. we will pass eval parameter to this function and then insert val variable. we specify the regular expression to this Val function. After this we will create test function to check email is valid or not. we will pass the function parameter to this text() function.
  • If your input value means your email is valid then we will return true otherwise return false.
  • So in focus out function, we will call validateEmail function in if statement. So if test function returns true then we will call jquery fadeout animation otherwise we specify invalid email error message to the label and then call fadeIn jquery function.
  • If you do not specify anything on the email textbox then we will specify email require error message.
  • Now just run your project using live server or just open the index.html file.

After completing all the steps You are able to validate email.

So now you know Email Validation Using javascript.

You can create multiple validation for multiple textboxes. That is all for this article. We will see you in the next article.

Leave a Reply

Your email address will not be published. Required fields are marked *