blogspot visit counter

Monday, 29 April 2013

change text box border color css using jquery asp.net

change text box border color css using jquery asp.net
Introduction : -
Here i will explain how i can change the boder color of textbox after insert the number using Jquery in Asp.Net   In My Previous Article I have Provide  jQuery Restrict to Allow Only Numbers in Textbox in Asp.net .

Description : -
In previous posts I explained  I have Explain create simple drop down menu using jquery ,Simple Menu using Jquery step by step  Now   I will expplain how to allow only numbers or numeric characters in textbox using Jquery  in Asp.net .

Jquery Scripts As Shown Below for Change the textbox Border Color in asp.net

Note :- I am  using visual stdio 2010 show i  include the jquey in my page form the scripts folder




<head runat="server">
    <title>Change textbox color on insert the any alfa numeric values</title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>

<!--change the border color color of textbox-->
    <script type="text/javascript" language="javascript">
        debugger;
        $(document).ready(function () {
            $(".txt1").keypress(function () {
                var str = /^[0-9a-zA-Z]+$/;
                var value = $(this).val();
                if (!str.test(value)) {
                    $(".txt1").css({ borderColor: 'Red' });
                }
                else {
                    $(".txt1").css({ borderColor: 'Green', BorderWidth: '3px' });
                }

            }).keypress();
        });
</script>

<script type="text/javascript">

    $(document).ready(function () {

        $(".txt2").keypress(function () {

            var str2 = /^[0-9a-zA-Z]+$/;
            var value = $(this).val();
            if (!str2.test(value)) {
                $(".txt2").css({ borderColor: 'red' });
            }
            else {
                $(".txt2").css({ borderColor: 'Green', BorderWidth: '2px' });
            }
        });
    });

</script>

</head>

Asp.net Text Box Controll On the Form As shown Below






<body>
<center>
    <form id="form1" runat="server">
    <div>
        Name&nbsp;&nbsp; :&nbsp; <asp:TextBox ID="txt2" runat="server" BorderWidth="2px" class="txt2"></asp:TextBox><br/><br/>
    Password :&nbsp; <asp:textbox id="txt1" runat="server" borderwidth="1px" class="txt1"></asp:textbox>
    </div>
    </form>
    </center>
</body>


 Output Windows as shown below



Download sample code attached



1 comment:

Related Posts Plugin for WordPress, Blogger...