0xCODE
Published in

0xCODE

Form validation with Javascript

Using Form Validation And RegEx For Checking E-mail Address Format (JS)

Before you can submit a form in your web application, it must undergo a form validation process. This is done of the frontend of development, to ensure that all data entry is correct. It is a form of error checking to validate the contents of field that will be submitted to the backend server for processing. If there is no form validation and it is sent in error, then there must be process on the backend to handle it.

Using frontend form validation is a more efficient way to remove the extra processing load on the backend server. GUI-based web applications that require the submission of data require plenty of validation the more fields there are for data entry. In this article we will do a simple checking routine to make sure that user enters their e-mail address correctly. This will require a Javascript development environment using any editor (Visual Studio Code was used in this example) and a web browser for testing (Chrome web browser).

Brief Intro To RegEx

Since we are validating an e-mail address, we have to use RegEx (Regular Expressions). This is because we need to match patterns and character combinations in a string. This requires using a regular expression literal which takes the form enclosed between slashes:

/ <pattern> /

An e-mail address consists of the following format:

username@domain_name.top_level_domain

username — A string that consists of characters A-Z (upper case letters) or a-z (lower case letters). It can also contain numbers and other characters like dots , so it has to be checked. (e.g. john.smith)

@ — This is the symbol that separates the user’s name from the domain the e-mail address is hosted on.

domain_name — The name of the e-mail host domain (e.g. somedomain)

top_level_domain — This indicates whether that domain is hosted on a commercial (.com), government (.gov) or other type of top level domain as defined in a name resolution or DNS server.

For our example let us say the e-mail address is: john.smith@somedomain.com

The following is our criteria for RegEx:

/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/

Note: For more on RegEx, please visit this link to understand how to create and write regular expressions.

Create The Form

Let’s build the HTML form. From a project folder, create a file which we will call emailvalidation.html. Then copy/paste or write the following code for our form.

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript - Regular Expressions With E-mail Validation</title>
</head><body><h3>E-mail Validation Check</h3><form name="myForm" onsubmit="return(validate());"><input id="text" name = Email placeholder="Email" type="text"><br><br><button type = "submit">Submit</button></form><script src="validate_form.js"> </script></body>
</html>

I have created a form called “myForm” using a function to return and validate input from the form. A simple submit button is also created that will be clicked by the user.

A script tag was added at the bottom because we will be calling a Javascript code to perform the validation. This will be a file that will be created in the next step. For now the name of that Javascript file, validate_from.js, should be included.

Note: The files used in this example can be given any name, besides what was provided.

The form should look like the following when opened in a web browser.

The HTML form layout in web browser.

Create The Validation Routines

In the same project folder create a new file called validate_form.js. This is the Javascript file that was specified in the script tags of the HTML file.

function validate(){     var email = document.getElementById("text").value;
var regx = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if(regx.test(email)){
alert("You have provided a valid e-mail ID")
return true
}
else{
alert("Sorry, incorrect e-mail ID")
document.myForm.Email.focus("")
return false;
}
}

Inside the file, a function called validate() was created. The regular expression created earlier was added to a variable regx which will be checked using a conditional statement.

How Validation Works

Using regx as the criteria, we use a test method routine to see if the pattern in the input field with the id of “text” passes. We do this by throwing the email variable as an argument for checking.

If the e-mail format is correct, then an alert box pops up with a message:

“You have provided a valid e-mail ID”

If the format is incorrect, then the alert box message will inform the user:

“Sorry, incorrect e-mail ID”

The focus will then return to the text field and a user can try again.

Let us say I intentionally typed in a wrong e-mail address:
john.smith$domainame.comp

The following alert message will appear:

Now if I typed in a correct e-mail address:
john.smith@somedomain.com

The alert message will appear as:

If I use a more complex e-mail formats like the following:
john.smith.123@domain.io
john.smith.123@domain.us.gov

They will all be valid based on the regular expression criteria created to check the proper user name and domain structure.

Synopsis

This presented a simple checking routine to validate an e-mail address in a form. The routine does not check if the e-mail address is verified or authentic. We can type any e-mail address and the application will only validate the e-mail in terms of its format, but not whether it is a real e-mail address or not. That requires a different process.

In more complex forms there are more than one routine used for form validation. This example shows just implementing validation to one field, whereas a data entry form for subscription to an online streaming service will have plenty. It is best to validate the data before it is submitted to the backend server to cut on processing load. It can also immediately notify the user on what they typed wrong, without having to go out over the network to have it checked.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vincent Tabora

Vincent Tabora

Editor HD-PRO, DevOps Trusterras (Cybersecurity, Blockchain, Software Development, Engineering, Photography, Technology)