Ads 468x60px

For New Update Use this Link Offer for you


Monday, 29 April 2013

change text box border color css using jquery

change text box border color css using jquery
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 .

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 .

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

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">
        $(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' });


<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' });


</head> Text Box Controll On the Form As shown Below

    <form id="form1" runat="server">
        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>

 Output Windows as shown below

Download sample code attached

No comments:

Post a Comment



New Updates

Related Posts Plugin for WordPress, Blogger...

Related Result