Want to become a Vibe Coder? Join Vibe Coding Training here
x
C# Corner
Tech
News
Videos
Forums
Jobs
Books
Events
More
Interviews
Live
Learn
Training
Career
Members
Blogs
Challenges
Certification
Contribute
Article
Blog
Video
Ebook
Interview Question
Collapse
Feed
Dashboard
Wallet
Learn
Achievements
Network
Refer
Rewards
SharpGPT
Premium
Contribute
Article
Blog
Video
Ebook
Interview Question
Register
Login
How To Blink Border When Validation Fails
WhatsApp
Apurba Ranjan
Jul 27
2016
1.3
k
0
1
Design
<div style=
"margin:auto;width:80%"
><br />
User Name : <asp:TextBox ID=
"txtUser"
runat=
"server"
CssClass=
"normalBorder"
/><br /><br />
Password : <asp:TextBox ID=
"txtPass"
runat=
"server"
CssClass=
"normalBorder"
/><br /><br />
<asp:Button ID=
"btnValidate"
runat=
"server"
Text=
"Validate"
/>
</div>
Style
<style type=
"text/css"
>
.normalBorder{
border
:
2px
solid
black
;
}
.ValidateBorder{
border
:
2px
solid
red
;
}
</style>
jQuery Code
<script src=
"scripts/jquery-3.1.0.min.js"
></script>
<script type=
"text/javascript"
>
$(document).ready(
function
() {
$(
"#btnValidate"
).click(
function
() {
if
($(
"#txtUser"
).val() ==
""
) {
var
$txt = $(
"#txtUser"
);
setInterval(
function
(){
$txt.toggleClass(
"ValidateBorder"
);
}, 500);
return
false
;
}
else
{
$(
"#txtUser"
).
class
(
"normalBorder"
);
}
});
$(
"#txtUser"
).focus(
function
() {
$(
"#txtUser"
).css(
"borderColor"
,
"black"
);
});
});
</script>
Jquery Animation
Validation Fail
Up Next
How To Blink Border When Validation Fails