MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

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.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

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>
 
Above figure is output of validation of empty field

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>
 
example of valid emails
example of invalid emails

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>
output checks the entered data is letters
include any other char also

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.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?

Did you like the post?

Help us to keep publishing good contents like this.

SUPPORT US

funded

remaining

[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login