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 : <asp:TextBox ID="txt2" runat="server" BorderWidth="2px" class="txt2"></asp:TextBox><br/><br/>
Password : <asp:textbox id="txt1" runat="server" borderwidth="1px" class="txt1"></asp:textbox>
</div>
</form>
</center>
</body>
Output Windows as shown below
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 : <asp:TextBox ID="txt2" runat="server" BorderWidth="2px" class="txt2"></asp:TextBox><br/><br/>
Password : <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
