Pages

Ads 468x60px

For New Update Use this Link http://dotnethubs.blogspot.in/ Offer for you

.

Showing posts with label change text box border color css using jquery asp.net. Show all posts
Showing posts with label change text box border color css using jquery asp.net. Show all posts

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



 

..




New Updates

Related Posts Plugin for WordPress, Blogger...

Related Result