Article

Validation in asp.net using JQuery Validation Engine

08 Feb 2018 Kamal Pratap
0 Comments 877 Views



We use JQuery validation when we validate the data entries at client side. It is a very powerful tool to validate data entries.

 

In this article we use JQuery Validation Engine to validate the fields data like required, name, email, mobile number,age, website address etc.

We will give the path for JS in the header section of the page.

Add the below script in the header of the page.

    <script src="js/jquery-1.8.2.min.js" type="text/javascript">
    </script>
    <script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
    </script>
    <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
    </script>
    <script>
        jQuery(document).ready(function () {
            // binds form submission and fields to the validation engine
            jQuery("#form1").validationEngine();
        });

        /**
        *
        * @param {jqObject} the field where the validation applies
        * @param {Array[String]} validation rules for this field
        * @param {int} rule index
        * @param {Map} form options
        * @return an error string if validation failed
        */
        function checkHELLO(field, rules, i, options) {
            if (field.val() != "HELLO") {
                // this allows to use i18 for the error msgs
                return options.allrules.validate2fields.alertText;
            }
        }
    </script>

 

Add CSS in the header of the page

        <style>
        /* Z-INDEX */
        .formError
        {
            z-index: 990;
        }
        .formError .formErrorContent
        {
            z-index: 991;
        }
        .formError .formErrorArrow
        {
            z-index: 996;
        }
        
        .ui-dialog .formError
        {
            z-index: 5000;
        }
        .ui-dialog .formError .formErrorContent
        {
            z-index: 5001;
        }
        .ui-dialog .formError .formErrorArrow
        {
            z-index: 5006;
        }
        .inputContainer
        {
            position: relative;
            float: left;
        }
        
        .formError
        {
            position: absolute;
            top: 300px;
            left: 300px;
            display: block;
            cursor: pointer;
            text-align: left;
        }
        
        .formError.inline
        {
            position: relative;
            top: 0;
            left: 0;
            display: inline-block;
        }
        
        .ajaxSubmit
        {
            padding: 20px;
            background: #55ea55;
            border: 1px solid #999;
            display: none;
        }
        
        .formError .formErrorContent
        {
            width: 100%;
            background: #ee0101;
            position: relative;
            color: #fff;
            min-width: 120px;
            font-size: 11px;
            border: 2px solid #ddd;
            box-shadow: 0 0 6px #000;
            -moz-box-shadow: 0 0 6px #000;
            -webkit-box-shadow: 0 0 6px #000;
            -o-box-shadow: 0 0 6px #000;
            padding: 4px 10px 4px 10px;
            border-radius: 6px;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            -o-border-radius: 6px;
        }
        
        .formError.inline .formErrorContent
        {
            box-shadow: none;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            -o-box-shadow: none;
            border: none;
            border-radius: 0;
            -moz-border-radius: 0;
            -webkit-border-radius: 0;
            -o-border-radius: 0;
        }
        
        .greenPopup .formErrorContent
        {
            background: #33be40;
        }
        
        .blackPopup .formErrorContent
        {
            background: #393939;
            color: #FFF;
        }
        
        .formError .formErrorArrow
        {
            width: 15px;
            margin: -2px 0 0 13px;
            position: relative;
        }
        body[dir='rtl'] .formError .formErrorArrow, body.rtl .formError .formErrorArrow
        {
            margin: -2px 13px 0 0;
        }
        
        .formError .formErrorArrowBottom
        {
            box-shadow: none;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            -o-box-shadow: none;
            margin: 0px 0 0 12px;
            top: 2px;
        }
        
        .formError .formErrorArrow div
        {
            border-left: 2px solid #ddd;
            border-right: 2px solid #ddd;
            box-shadow: 0 2px 3px #444;
            -moz-box-shadow: 0 2px 3px #444;
            -webkit-box-shadow: 0 2px 3px #444;
            -o-box-shadow: 0 2px 3px #444;
            font-size: 0px;
            height: 1px;
            background: #ee0101;
            margin: 0 auto;
            line-height: 0;
            font-size: 0;
            display: block;
        }
        
        .formError .formErrorArrowBottom div
        {
            box-shadow: none;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            -o-box-shadow: none;
        }
        
        .greenPopup .formErrorArrow div
        {
            background: #33be40;
        }
        
        .blackPopup .formErrorArrow div
        {
            background: #393939;
            color: #FFF;
        }
        
        .formError .formErrorArrow .line10
        {
            width: 15px;
            border: none;
        }
        
        .formError .formErrorArrow .line9
        {
            width: 13px;
            border: none;
        }
        
        .formError .formErrorArrow .line8
        {
            width: 11px;
        }
        
        .formError .formErrorArrow .line7
        {
            width: 9px;
        }
        
        .formError .formErrorArrow .line6
        {
            width: 7px;
        }
        
        .formError .formErrorArrow .line5
        {
            width: 5px;
        }
        
        .formError .formErrorArrow .line4
        {
            width: 3px;
        }
        
        .formError .formErrorArrow .line3
        {
            width: 1px;
            border-left: 2px solid #ddd;
            border-right: 2px solid #ddd;
            border-bottom: 0 solid #ddd;
        }
        
        .formError .formErrorArrow .line2
        {
            width: 3px;
            border: none;
            background: #ddd;
        }
        
        .formError .formErrorArrow .line1
        {
            width: 1px;
            border: none;
            background: #ddd;
        }
    </style>

Add below HTML Markup in the body of the page.

<legend>Jquery Validation example in asp.net</legend>
    <table style="height: 500px;">
        <tr>
            <td>
                Name
            </td>
            <td>
                <asp:TextBox ID="txtName" runat="server" class="validate[required] text-input"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                User Name
            </td>
            <td>
                <asp:TextBox ID="txtUserName" runat="server" class="validate[required] text-input"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                Email
            </td>
            <td>
                <asp:TextBox ID="txtEmail" runat="server" class="validate[validate[required],custom[email]] text-input"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                Password
            </td>
            <td>
                <asp:TextBox ID="txtPwd" class="validate[required] text-input" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                Confirm Password
            </td>
            <td>
                <asp:TextBox ID="txtConfirmPwd" class="validate[required,equals[txtPwd]] text-input"
                    runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                Website
            </td>
            <td>
                <asp:TextBox ID="txtWebsite" class="validate[required,custom[url]] text-input" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                Age
            </td>
            <td>
                <asp:TextBox ID="txtAge" runat="server" class="validate[required,custom[integer],max[80]] text-input"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                Mobile Number
            </td>
            <td>
                <asp:TextBox ID="txtMobile" runat="server" class="validate[required,custom[integer],max[9999999999]] text-input"
                    MaxLength="10"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;
            </td>
            <td>
                <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
            </td>
        </tr>
    </table>

 

Kamal Pratap

I have 6+ years experience in .Net technologies like Asp.Net, C#, WCF, Web Services, SQL Server, Ajax, LinQ. Currently I am working in Netcarrots Loyalty Services as a Software Developer.

Comments

No coments found to display!

Leave a Comment