Validations In JavaScript

Debendra Dash
9y
5.3k
0
3

Article

As we know JavaScript is used for mainly client side validations. Here in this article I have completed almost all JavaScript validations that we need during our project.

Textbox should not be blank

Here in this demo, I will explain how to restrict a user to fill a textbox using javascript. Initially I have the form like this.

Here is my Html code for this.

<body>
<form id="form1" runat="server">
<div style="margin-left:200px; border:solid; border-color:aqua; width:300px;">
<table>
<tr>
<td>
<b>Name</b>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txt_name" runat="server" Width="183px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<b>Select Country:-</b>
</td>
</tr>
<tr>
<td>
<asp:DropDownList ID="DropDownList1" runat="server" Height="16px" Width="191px">
<asp:ListItem>--Select--</asp:ListItem>
<asp:ListItem>India</asp:ListItem>
<asp:ListItem>Pakistan</asp:ListItem>
<asp:ListItem>Kenya</asp:ListItem>
<asp:ListItem>SriLanka</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Button runat="server" ID="btn_save" Text="Add" OnClientClick="return validate()" />
</td>
</tr>
</table>
</div>

Here is the script to add validations:

<head runat="server">
<title></title>
<script type="text/javascript">
function validate() {
if (document.getElementById("<%=txt_name.ClientID%>").value == "") {
alert('!!!!!!! Name should not be blank');
document.getElementById("<%=txt_name.ClientID%>").focus();
return false;
}
return true;
}
</script>
</head>

So it will popup the following message when user clicks the button without entering a username.

Dropdown list should not be blank

In this I have explained how to restrict a user to select the dropdownlist.

Here I have the same for:

Here's the code for my DropDownList.

<tr>
<td>
<b>Select Country:-</b>
</td>
</tr>
<tr>
<td>
<asp:DropDownList ID="ddl_country" runat="server" Height="16px" Width="191px">
<asp:ListItem>--Select--</asp:ListItem>
<asp:ListItem>India</asp:ListItem>
<asp:ListItem>Pakistan</asp:ListItem>
<asp:ListItem>Kenya</asp:ListItem>
<asp:ListItem>SriLanka</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Button runat="server" ID="btn_save" Text="Add" OnClientClick="return validate()" />
</td>
</tr>

And here is my javascript function to validate the dropdown.

<script type="text/javascript">
function validate() {
if (document.getElementById("<%=ddl_country.ClientID%>").value == "--Select--") {
alert('!!!!!!Please Enter a country.');
document.getElementById("<%=ddl_country.ClientID%>").focus();
return false;
}
return true;
}
</script>

Here this is how you get the error message on clicking the button without selecting the DropDownList.

Allow Only character in a TextBox

Please design the form with a textbox as in the following screenshot:

Here is my html code.

<body>
<form id="form1" runat="server">
<div style="margin-left:200px; border:solid; border-color:aqua; width:300px;">
<table>
<tr>
<td>
<b>Name</b>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txt_name" runat="server" Width="183px" onkeyup=" Ischar (this)"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button runat="server" ID="btn_save" Text="Add" />
</td>
</tr>
</table>
</div>
</form>
</body>

And here is my javascript to validate the textbox.

<script type="text/javascript">
function Ischar(field) {
var re = /^[’A-Z’’a-z’]*$/;
if (!re.test(field.value)) {
alert('Only Character Values');
field.value = field.value.replace(/[^’A-Z’’a-z’]/g, "");
return false;
}
return true;
}
</script>

I will get the following error message like this if I entered any number to the textbox.

Allow Only Numeric In TextBox

I have the same source here.

<body>
<form id="form1" runat="server">
<div style="margin-left:200px; border:solid; border-color:aqua; width:300px;">
<table>
<tr>
<td>
<b>Name</b>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txt_name" runat="server" Width="183px" onkeyup=" Isnumber (this)"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button runat="server" ID="btn_save" Text="Add" />
</td>
</tr>
</table>
</div>
</form>
</body>

And here is my JavaScript.

<script type="text/javascript">
function Isnumber(field) {
var re = /^[’0-9’’0-9’]*$/;
if (!re.test(field.value)) {
alert('Only numeric Values');
field.value = field.value.replace(/[^’0-9’’0-9’]/g, "");
return false;
}
return true;
}
</script>

It will give the following error message when you enter any character.

Phone number validation:

Here is my source code for mobile number validation.

<body>
<form id="form1" runat="server">
<div style="margin-left:200px; border:solid; border-color:aqua; width:300px;">
<table>
<tr>
<td>
<b>Name</b>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtphone" runat="server" Width="183px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button runat="server" ID="btn_save" Text="Add" OnClientClick="return validate()" />
</td>
</tr>
</table>
</div>
</form>
</body>

The design is like the following screenshot:

Now my JavaScript for validation is.

<script type="text/javascript">
function validate() {
var a = document.getElementById("<%=txtphone.ClientID %>").value;
if (a == "Ex: 08018070777") {
alert("Mobile no Should Not be Blank");
document.getElementById("<%=txtphone.ClientID %>").focus();
return false;
}
if (isNaN(a)) {
alert("Enter the valid Mobile Number(Like : 08018070777)");
document.getElementById("<%=txtphone.ClientID %>").focus();
return false;
}
if (a.length < 11) {
alert(" Your Mobile Number must 11 Integers(Like :08018070777)");
document.getElementById("<%=txtphone.ClientID %>").focus();
return false;
}
}
</script>

It will give the following error if the textbox is blank.

It will give this error if your number is less than 11 digits.

It will give this if you enter any character.

Email Id Validation:

For email validation this is my html code.

<body>
<form id="form1" runat="server">
<div style="margin-left:200px; border:solid; border-color:aqua; width:300px;">
<table>
<tr>
<td>
<b>Email</b>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="TxtEmail" runat="server" Width="183px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button runat="server" ID="btn_save" Text="Add" OnClientClick="return validate()" />
</td>
</tr>
</table>
</div>
</form>
</body>

And here is my JavaScript for email validation.

<script type="text/javascript">
function validate() {
if (document.getElementById("<%=TxtEmail.ClientID%>").value == "") {
alert("Email id can not be blank");
document.getElementById("<%=TxtEmail.ClientID%>").focus();
return false;
}
var emailPat = /^(\".*\"|[A-Za-z]\w*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z]\w*(\.[A-Za-z]\w*)+)$/;
var emailid = document.getElementById("<%=TxtEmail.ClientID%>").value;
var matchArray = emailid.match(emailPat);
if (matchArray == null) {
alert("Your email address seems incorrect. Please try again.");
document.getElementById("<%=TxtEmail.ClientID%>").focus();
return false;
}
}
</script>

You will get the following error if you enter wrong email id.

Here's an error you will get if you entered nothing:

Thus in this way we can implement all JavaScript validations.

These were some of the common used validations which I documented so that whenever I need it in the project I can use without searching over the Internet. Hope this will help everyone.

Up Next

Ebook Download

View all

A Guide to Mastering HTML5 CSS3 and JavaScript

Read by 3 people

Download Now!

Learn

View all