Monday 2 December 2013

jQuery For Beginners

Hai friends I'm going to post my small innovation that might help you .Here I'm going to present something called jQuery.

What is jQuery?

jQuery means simply what we say Write less Do more. jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

So lets start our task...:)

Components used for the development


  1. Visual Studio 2.0  or greater
  2. jQuery files  
                  jquery-1.7.1.js 
                 jquery-1.7.1.min .js
These files can be available from jquery website
Along with this file I created a custom js file called MyCustom.js. Here I created client side validations.

Step1

After adding respective js files into a new Asp.Net solution ,specify the components to a new default.aspx page.
In the source it should be like

Note(Never specify any custom js files above jQuery library.When you see the the tags you can see myCustom.js is placed below my jquery-1.7.1.js and jquery-1.7.1.min.js files )

<head runat="server">
    <title>Untitled Page</title>
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/MyCustom.js" type="text/javascript"></script>
</head>

Step2

Inside body tag inside form tag add a div tag and inside that specify the code as shown below

<strong>Jquery Samples</strong>
    <table>
        <tr>
        <td><span style="color:Red">*</span>First Name</td>
        <td><asp:TextBox ID="txt_FName" runat="server" class="txt_FNameCls disable"></asp:TextBox></td>
        <td><span id="spn_FnameError" style="color:Red"></span></td>
    </tr>
        
        <tr>
        <td><span style="color:Red">*</span>Last Name</td>
        <td><asp:TextBox ID="txt_LName" runat="server" class="txt_LNameCls disable"></asp:TextBox></td>
        <td><span id="spn_LNameError" style="color:Red"></span></td>
        </tr>
        
        <tr>
        <td><span style="color:Red">*</span>Address</td>
        <td><asp:TextBox ID="txt_Address1" runat="server" class="txt_Address1Cls disable"></asp:TextBox></td>
        <td><span id="spn_AddError" style="color:Red"></span></td>
        </tr>
        
        <tr>
        <td></td>
        <td><asp:TextBox ID="txt_Address2" runat="server"></asp:TextBox></td>
        <td></td>
        </tr>
        
        <tr>
        <td></td>
        <td><asp:TextBox ID="txt_Address3" runat="server"></asp:TextBox></td>
        <td></td>
        </tr>
        
        <tr>
        <td><span style="color:Red">*</span>City</td>
        <td><asp:TextBox ID="txt_City" runat="server" class="txt_CityCls disable"></asp:TextBox></td>
        <td><span id="spn_txtCityError" style="color:Red"></span></td>
        </tr>
        
        <tr>
        <td><span style="color:Red">*</span>State</td>
        <td><asp:DropDownList ID="drp_State" runat="server" class="drp_StateCls" 
                Width="156px">
            <asp:ListItem>Select State</asp:ListItem>
            <asp:ListItem>Alaska</asp:ListItem>
            <asp:ListItem>NewYork</asp:ListItem>
            <asp:ListItem>Seattle</asp:ListItem>
            <asp:ListItem>Washington</asp:ListItem>
            <asp:ListItem></asp:ListItem>
            </asp:DropDownList></td>
        <td><span id="spn_StateError" style="color:Red"></span></td>
        </tr>
        
        <tr>
        <td><span style="color:Red">*</span>Day Phone</td>
        <td><asp:TextBox ID="txt_DPhone" runat="server" class="txt_DPhoneCls disable"></asp:TextBox></td>
        <td><span id="spn_DPhoneError" style="color:Red"></span></td>
        </tr>
        
        <tr>
        <td><span style="color:Red">*</span>Night Phone</td>
        <td><asp:TextBox ID="txt_NPhone" runat="server"  class="txt_NPhoneCls disable"></asp:TextBox></td>
        <td><span id="spn_NPhoneError" style="color:Red"></span></td>
        </tr>
        
        <tr>
        <td><span style="color:Red">*</span>Gender</td>
        <td><asp:RadioButtonList ID="rbtnListGender" runat="server" class="rbtnListGender" 
                RepeatDirection="Horizontal">
            <asp:ListItem>Male</asp:ListItem>
            <asp:ListItem>Female</asp:ListItem>
            </asp:RadioButtonList></td>
        <td><span id="spn_GenderError" style="color:Red"></span></td>
        </tr>
        
        <tr>
        <td><span style="color:Red">*</span>Qualification</td>
        <td><asp:CheckBoxList ID="chkQualification" runat="server" class="chkQualification">
            <asp:ListItem>HSE</asp:ListItem>
            <asp:ListItem>Degree</asp:ListItem>
            <asp:ListItem>PG</asp:ListItem>
            <asp:ListItem>Others</asp:ListItem>
            </asp:CheckBoxList></td>
        <td><span id="spn_qualification" style="color:Red"></span></td>
        </tr>
        
        <tr>
        <td colspan="2" align="center"><asp:Button ID="btn_Save" runat="server" Text="Save" class="btn_SaveCls" Width="160px"/></td>
        </tr>
        

    </table>

Step3

Place the below lines inside our custom js file ie MyCustom.js f


//Created By Marrit K John
//Version 0.5
//Date :2-12-2013


$(document).ready(function() {

    //Button Click Event
    $('.btn_SaveCls').click(function() {

        var retValue = CheckValidation();
        if (retValue == true) {
            alert('Successfully achieved');
        }
        return retValue;
    });

    //Remove All AutoFill if any browsers allows if any.
    $("input").attr("autocomplete", "off");

    //Border color get back if user made any focus on textbox control.
    $('input[type=text]').focus(function() {
        $(this).closest('td').next('td').find('span').text('');
        $(this).removeAttr('style');
    });
    
    //Click action for radio button list
    $('.rbtnListGender').click(function() {
        $('#spn_GenderError').text('');
    });
    //Click action for checkboxlist  
    $('.chkQualification').click(function() {
        $('#spn_qualification').text('');
    });

    //Click action for dropdownlist
    $('.drp_StateCls').click(function() {
        $('#spn_StateError').text('');
        $('.drp_StateCls').css({ "border-color": "none", "border": "1px solid" });
    });
    
    //Key Down event action for dropdown
    $('.drp_StateCls').keydown(function() {
        $('#spn_StateError').text('');
        $('.drp_StateCls').css({ "border-color": "none", "border": "1px solid" });
    });
    MaxLength();
    BlockCopyPaste();
    AllowNumbersOnly();
});
function CheckValidation() {
      //  alert('hi');
    var retvalue = true;
   
        var fname = $.trim($('.txt_FNameCls').val());
        var lname = $.trim($('.txt_LNameCls').val());
        var address = $.trim($('.txt_Address1Cls').val());
        var city = $.trim($('.txt_CityCls').val());
        var state = $.trim($('.drp_StateCls').val());
        var dPhone = $.trim($('.txt_DPhoneCls').val());
        var nPhone = $.trim($('.txt_NPhoneCls').val());
        if (fname == "") {
            $('#spn_FnameError').text('Please Enter First Name');
            $('.txt_FNameCls').css({ "color": "red", "border": "2px solid red" });
            retvalue = false;
        }
        if (lname == "") {
            $('#spn_LNameError').text('Please Enter Last Name');
            $('.txt_LNameCls').css({ "color": "red", "border": "2px solid red" });
            retvalue = false;
        }
        if (address == "") {
            $('#spn_AddError').text('Please Enter Address');
            $('.txt_Address1Cls').css({ "color": "red", "border": "2px solid red" });
            retvalue = false;
        }
        if (city == "") {
            $('#spn_txtCityError').text('Please Enter City');
            $('.txt_CityCls').css({ "color": "red", "border": "2px solid red" });
            retvalue = false;
        }
        if (dPhone == "") {
            $('#spn_DPhoneError').text('Please Enter Day Phone');
            $('.txt_DPhoneCls').css({ "color": "red", "border": "2px solid red" });
            retvalue = false;
        } else if (dPhone.length < 10) {
            $('#spn_DPhoneError').text('Please Enter a Valid Day Phone');
            $('.txt_DPhoneCls').css({ "border-color": "red", "border": "2px solid red" });
            retvalue = false;

        }

        if (nPhone == "") {
            $('#spn_NPhoneError').text('Please Enter Night Phone');
            $('.txt_NPhoneCls').css({ "color": "red", "border": "2px solid red" });
            retvalue = false;
        } else if (nPhone.length < 10) {
            $('#spn_NPhoneError').text('Please Enter a Valid Night Phone');
            $('.txt_NPhoneCls').css({ "border-color": "red", "border": "2px solid red" });
            retvalue = false;
        }
        var genderCheckedCount = $(".rbtnListGender :radio:checked").length;
            if (genderCheckedCount >0 ) {
                $('#spn_GenderError').text('');
            }
            else {
                $('#spn_GenderError').text('Please Select Any Gender');
                retvalue = false;
            }
            var qualificationCount = $(".chkQualification :checkbox:checked").length;
            if (qualificationCount > 0) {
                $('#spn_qualification').text('');
            }
            else {
                $('#spn_qualification').text('Please Select Any Qualification');
                retvalue = false;
            }
           
            if (state == "Select State") {
                $('#spn_StateError').text('Please Select Any State');
                $('.drp_StateCls').css({ "border-color": "red", "border": "2px solid red" });
                retvalue = false;
            }
            else {
                $('#spn_StateError').text('');
                $('.drp_StateCls').css({ "border-color": "none", "border": "1px solid" });
               
            }
        return retvalue;
    }

//For setting Max length in a text box

    function MaxLength() {
       
        $(".txt_FNameCls").attr('maxlength', '20');
        $(".txt_LNameCls").attr('maxlength', '20');
        $(".txt_Address1Cls").attr('maxlength', '40');
        $(".txt_DPhoneCls").attr('maxlength', '10');
        $(".txt_NPhoneCls").attr('maxlength', '10');
    }
    function BlockCopyPaste() {
        var controls = $(".disable");
        controls.bind("paste", function() {
            return false;
        });
        controls.bind("drop", function() {
            return false;
        });
        controls.bind("cut", function() {
            return false;
        });
        controls.bind("copy", function() {
            return false;
        });
    }
    function AllowNumbersOnly() {
        $('input[name="txt_DPhone"]').keyup(function(e) {
            
            if (/\D/g.test(this.value)) {
                this.value = this.value.replace(/\D/g, '');
            }
        });

        $('input[name="txt_DPhone"]').keypress(function(e) {
          
            if (this.value.length == 0 && e.which == 48) {
                $('#spn_DPhoneError').text('Please Enter valid Day Phone');
                return false;
            }
            else {
                $('#spn_DPhoneError').text('');
            }
        });
        $('input[name="txt_NPhone"]').keyup(function(e) {
            if (/\D/g.test(this.value)) {
                this.value = this.value.replace(/\D/g, '');
            }
        });
        $('input[name="txt_NPhone"]').keypress(function(e) {

            if (this.value.length == 0 && e.which == 48) {
                $('#spn_NPhoneError').text('Please Enter valid Night Phone');
                return false;
            }
            else {
                $('#spn_NPhoneError').text('');
            }
        });

    }