jQuery Validator

In this article we will see how to create validation framework in jQuery. I tried to do create validator similar to ASP.NET.

Let's see how we can do this.



Step 1:  Place two textboxes (First Name and Last Name) which will accept only alphabet, a dropdownlist, another textbox (Age) whic will accept only integers, another textbox (Address) which will accept alphanumeric dharacters.
All are mandatory except address field. Different type of validation is required in different textboxes.
 
<div>
        <span class="label">First Name *</span><input type="text" class="validatetextinput alphabettextinput" id="username" /><span class="imgerror"><img src="images/warning-icon.png" /></span>
</div>
<div>
        <span class="label">Last Name *</span><input type="text" class="validatetextinput alphabettextinput" id="password" /><span class="imgerror"><img src="images/warning-icon.png" /></span>
</div>
<div>
        <span class="label">Gender *</span>
        <asp:DropDownList class="validatetextinput" runat="server" ID="ddl">
                <asp:ListItem Text="" Value=""></asp:ListItem>
                <asp:ListItem Text="Male" Value="1"></asp:ListItem>
                <asp:ListItem Text="Female" Value="1"></asp:ListItem>
        </asp:DropDownList>
        <span class="imgerror"><img src="images/warning-icon.png" /></span>
</div>
<div>
        <span class="label">Age *</span><input type="text" class="validatetextinput integertextinput" id="Text1" /><span class="imgerror"><img src="images/warning-icon.png" /></span>
</div>
<div>
        <span class="label">Address</span><input type="text" class="textinput alphanumerictextinput" id="email" /><span class="imgerror"><img src="images/warning-icon.png" /></span>
</div>
<asp:Button ID="btnSave" Text="Save" runat="server" OnClientClick="return Validate();" />



Step 2:  Place below style in the header section of the page. There are few style which doesn't have and style property in it. It will be used to decide which validation need to be performed on any field.
 
<style type="text/css">
        .label
        {
                float: left;
                width: 100px;
        }

        .validatetextinput
        {
                width: 120px;
        }
        .integertextinput
        {
        }
        .alphabettextinput
        {
        }
        .alphanumerictextinput
        {
        }
        .textinput
        {
                width: 120px;
        }

        .imgerror
        {
                color: red;
                padding-left: 10px;
        }
</style>
 
Step 3:  Add jquery reference in the header section of the page.
 
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
 
Step 4:  Place below javascript in the page to execute validation on the contols.
 
<script language="javascript" type="text/javascript">
        $(document).ready(function() {
                $('.imgerror').hide();
        });
        function Validate() {
                var flag;
                $('.validatetextinput').each(function() {
                        var data = $(this).val();
                        var len = data.length;
                        if (len < 1) {
                                $(this).parent().find('.imgerror').show();
                                flag = true;
                        }
                        else {
                                $(this).parent().find('.imgerror').hide();
                                flag = false;
                        }
                });

                $('.integertextinput').each(function() {
                        var data = $(this).val();
                        var len = data.length;
                        if (len > 1) {
                                var success = data.search('^[1-9]+[0-9]*$');
                                if (success == -1) {
                                        $(this).parent().find('.imgerror').show();
                                        flag = true;
                                }
                                else {
                                        $(this).parent().find('.imgerror').hide();
                                        flag = false;
                                }
                        }
                });

                $('.alphabettextinput').each(function() {
                        var data = $(this).val();
                        var len = data.length;
                        if (len > 1) {
                                var success = data.search('^[a-zA-Z ]+$');
                                if (success == -1) {
                                        $(this).parent().find('.imgerror').show();
                                        flag = true;
                                }
                                else {
                                        $(this).parent().find('.imgerror').hide();
                                        flag = false;
                                }
                        }
                });
 
                $('.alphanumerictextinput').each(function() {
                        var data = $(this).val();
                        var len = data.length;
                        if (len > 1) {
                                var success = data.search('^[a-zA-Z0-9\ \s.\-]+$');
                                if (success == -1) {
                                        $(this).parent().find('.imgerror').show();
                                        flag = true;
                                }
                                else {
                                        $(this).parent().find('.imgerror').hide();
                                        flag = false;
                                }
                        }
                });
                if (flag) {
                        return false;
                }
                return true;
        }
</script>
  
Live Demo
Like us if you find this post useful. Thanks! 
Shibashish mohanty
Download Code