Client Side Validation using JavaScript

Introduction

In this article how we can validate TextBox and DropDownList using JavaScript.

Using the code

In this article we will see how we can validate a TextBox and DropDownList using JavaScript.

Firstly we add some textboxes and a dropdownlist to an .aspx page, as follows:

<table class="style1">
    <tr>
        <td>
            <asp:Label ID="Label1" runat="server" Text="First Name"></asp:Label>
        </td>
        <td>
            <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td>
            <asp:Label ID="Label2" runat="server" Text="Last Name"></asp:Label>
        </td>
        <td>
            <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="style2">
            <asp:Label ID="Label3" runat="server" Text="Email"></asp:Label>
        </td>
        <td class="style2">
            <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td>
            <asp:Label ID="Label4" runat="server" Text="Pin"></asp:Label>
        </td>
        <td>
            <asp:TextBox ID="txtPin" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr>
       <td>
            <asp:Label ID="Label5" runat="server" Text="URL"></asp:Label>
        </td>
        <td>
            <asp:TextBox ID="txtURL" runat="server"></asp:TextBox>
        </td>
    </tr>
     <tr>
       <td>
            <asp:Label ID="Label6" runat="server" Text="City"></asp:Label>
       </td>
       <td>
           <asp:DropDownList ID="DropDownList1" runat="server" Height="20px" Width="135px">
              <asp:ListItem></asp:ListItem>
              <asp:ListItem>Select</asp:ListItem>
              <asp:ListItem>Chandigarh</asp:ListItem>
              <asp:ListItem>Delhi</asp:ListItem>
              <asp:ListItem>Mumbai</asp:ListItem>
           </asp:DropDownList>
       </td>
    </tr>
    <tr>
        <td>
            &nbsp;</td>
        <td>
            <asp:Button ID="Button1" runat="server" Text="Submit" 
                OnClientClick="return validate();" onclick="Button1_Click" />
        </td>
    </tr>
    <tr>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
    </tr>
</table>

OnClientClick="return validate();" is used to call the JavaScript function on click of the Submit button.

Now we will add JavaScript code to implement client side implementation.

Firstly we will add a JavaScript function:

 <script type="text/javascript">
    function validate() 
    {
	//code here....
}
</script>

Now in the validate() function, we will get the value of textboxes and the dropdownlist like below:

var Firstname = document.getElementById('<%=txtFirstName.ClientID %>').value;
var LastName = document.getElementById('<%=txtLastName.ClientID %>').value;
var Email = document.getElementById('<%=txtEmail.ClientID %>').value;
var Pin = document.getElementById('<%=txtPin.ClientID %>').value;
var WebUrl = document.getElementById('<%=txtURL.ClientID %>').value;
var City = document.getElementById('<%=DropDownList1.ClientID %>').value;

Now we check textboxes are blank or not like below:

if (Firstname == "") 
{
    alert("Enter First Name");
    return false;
}

if (LastName == "") {
    alert("Enter Last Name");
    return false;
}

if (Email == "") {
    alert("Enter Email");
    return false;
}

 if (Pin == "") {
    alert("Enter Pin");
    return false;
}
 if(WebUrl == "")
{
   alert("Enter Web URL");
   return false;
}
if (City == "")
{
   alert("Select City");
   return false;
}

Now for email value we will create a parameter that finds if the email format is valid or not.

var emailPat = /^(\".*\"|[A-Za-z]\w*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z]\w*(\.[A-Za-z]\w*)+)$/
            var EmailmatchArray = Email.match(emailPat);

Here we check it is valid or not..

if (EmailmatchArray == null) {
    alert("Your email address seems incorrect. Please try again.");
    return false;
}

Now for Pin No. value, we will create a parameter that finds if the PinNo format is valid or not.

var digits = "0123456789";
var temp;

for (var i = 0; i < document.getElementById("<%=txtPin.ClientID %>").value.length; i++) {
    temp = document.getElementById("<%=txtPin.ClientID%>").value.substring(i, i + 1);
    if (digits.indexOf(temp) == -1) {
        alert("Please enter correct pin code");
        document.getElementById("<%=txtPin.ClientID%>").focus();
        return false;
    }
}

Now for the WebUrl value, we will create a parameter that finds if the WebUrl format is valid or not.

var Url = "^[A-Za-z]+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&\?\/.=]+$";
var matchURL = WebUrl.match(Url);
if (matchURL == null) {
   alert("Web URL does not look valid");
   document.getElementById("<%=txtURL.ClientID %>").focus();
   return false;
}

We have already checked if the dropdownlist value is blank or not. If we want that dropdownlist value should not be selected, then we will add one more checkpoint as follows:

if (City == "Select") {
   alert("Select City");
   return false;
}

Following is the complete JavaScript function:

<script type="text/javascript">
function validate() 
{
    var Firstname = document.getElementById('<%=txtFirstName.ClientID %>').value;
    var LastName = document.getElementById('<%=txtLastName.ClientID %>').value;
    var Email = document.getElementById('<%=txtEmail.ClientID %>').value;
    var Pin = document.getElementById('<%=txtPin.ClientID %>').value;
    var WebUrl = document.getElementById('<%=txtURL.ClientID %>').value;
    var City = document.getElementById('<%=DropDownList1.ClientID %>').value;

    if (Firstname == "") 
    {
        alert("Enter First Name");
        return false;
    }
    if (LastName == "") {
        alert("Enter Last Name");
        return false;
    }
    
    if (Email == "") {
        alert("Enter Email");
        return false;
    }
    var emailPat = /^(\".*\"|[A-Za-z]\w*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z]\w*(\.[A-Za-z]\w*)+)$/
    var EmailmatchArray = Email.match(emailPat);
    if (EmailmatchArray == null) {
        alert("Your email address seems incorrect. Please try again.");
        return false;
    }

    
    if (Pin == "") {
        alert("Enter Pin");
        return false;
    }
    var digits = "0123456789";
    var temp;

    for (var i = 0; i < document.getElementById("<%=txtPin.ClientID %>

When user enters wrong information or may the user leaves a textbox blank, then the client side validation will be work. This will reduce server traffic. I hope this helps you.