Validation in JavaScript: Emails, Letters and Empty Input Textbox

In this article we will cover some basic types of validations in JavaScript. This article will cover the validations using the regex as well as using simple methods

Introduction

This tutorial deals with some validations in JavaScript. The tutorial will also cover various examples to demonstrate the validation functionality.

Validations in Javascript

Much of the headache on the part of handling data checking can be reduced by using validations in JavaScript. Validation is a process of checking the data entered on an HTML page by user before sending to the server.

Validation scheme is generally used with forms where various kinds of information is required. If the developer has not used the validation scheme, then he may have a confusing or incomplete data. Because the users will enter the information in a way they like. So, it is better to make arrangements for an organized and complete data before using it. The main idea regarding JavaScript form validation is to provide a method to check the user-entered information before they can even submit it. JavaScript also allows developers to display alerts whenever the information has been left out or entered incorrectly by the user. The alert even contains the solution to correct the mistake conducted by the user.

The below are some area’s where JavaScript validation scheme is useful:

If a text input is all alphanumeric characters (numbers & letters)

If a text input has the correct number of characters in it (useful when restricting the length of a username and/or password)

If a selection has been made from an HTML select input (the drop down selector)

If a text input is empty or not

If a text input is all numbers

If a text input is all letters

If an email address is valid

Let’s start with empty field validation. The below code check the length of input textbox and if empty display a message.

Listing 1: Script to Validate Empty Field.

<html>
<body>
<script type='text/javascript'>
function Empty(element, AlertMessage){
	if(element.value.trim()== ""){
		alert(AlertMessage);
		element.focus();
		return false;
	}	
	alert("Textbox Validation: Successful.")
	return true;
}
</script>
<form>
Enter any value or left blank: <input type='text' id='txtBox'/>
<input type='button' 
	onclick="Empty(document.getElementById('txtBox'), 'Textbox is empty, Please Enter a Value')"
	value='Validate Textbox' />
</form>
</body>
</html>

Figure 1: Above figure is output of validation of empty field

In above script, function Empty will check that the HTML input that is being send to the server has something in it. This is done with the help of built in properties of JavaScript strings; take the value of input textbox trim it and then check for empty string. If value is not empty show the successful message.

In series of validation scheme there are various kind of validation scheme, Let’s some more different kind of validations.

Email Validation in Javascript

Email validation scheme tells that how to check if a user's email address is valid. Email validation checks the following points

Combination of letters, numbers, periods, hyphens, plus signs, and/or underscores

The at “@” symbol

A period and top level domain like net, edu, uk, us, uk, com, net, gov.

Let’s go through an example to understand the usage of email validation. The below example demonstrate the validation with help of regex to validate the email.

Listing 2: Email Validation script

<html>
<body>
<script type='text/javascript'>
function emailValidator(element, alertMsg){
	var emailvalid = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
	if(element.value.match(emailvalid))
	{
	    alert("Email Validation: Successful.");
		return true;
	}else{
		alert(alertMsg);
		element.focus();
		return false;
	}
}
</script>
<form>
Enter Your Email or put any value: <input type='text' id='emailid'/>
<input type='button' 
	onclick="emailValidator(document.getElementById('emailid'), 'This is Not a Valid Email')"
	value='Validate Email ID' />
</form></body>
</html>

Figure 2: Above two figures are example of valid and invalid emails.

Javascript Letters Validations

This is validation to check that entered values are all letters or combination of different chars. Following script will compile the idea of validation for all letters.

Listing 3: Validation for all letters

<html>
<body>
<script type='text/javascript'>
function onlyalphabate(element, AlertMessage){
	var regexp = /^[a-zA-Z]+$/;
	if(element.value.match(regexp))
	{
	alert("Letter Validation: Successful.");
	return true;
	}else{
		alert(AlertMessage);
		element.focus();
		return false;
	}
}
</script>
<form>
Please Letters Only: <input type='text' id='txtletters'/>
<input type='button' 
	onclick="onlyalphabate(document.getElementById('txtletters'), 'Please Enter letters only.')"
	value='Validate Letter' />
</form>
</body>
</html>

Figure 3: Above output checks the entered data is letters or include any other char also.

Conclusion:

Tutorial covered three validation scheme. Two of them are using regular expression for matching and the other one is simple so not writing regex but if you want you can write a regex for this case also. There are various validation schemes for checking the other type of validations, like check for all or no, checking for all letters and numbers and restricting the length of field. Now you can explore these areas and comment here in case of any issues.

Android APK Point