In this tutorial, we will see how we can do jQuery empty textbox validation or how to check textbox is empty in jQuery.
In this example, we are going to add one textbox control and one button control. When textbox is empty and validate button is clicked,then application will show validation message.
Please follow below steps:-
1)Open notepad or any editor of your choice.
2)Add html, head, script and body tag.
<html>
<head>
<script></script>
</head>
<body>
</body>
</html>
3)Add jQuery CDN link in head section.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
4) Add textbox control and button control in body tag as below:
Name:<input type="text" Id="txtName"/> <input type="button" value="Validate" Id="btnValidate">
5)Add jQuery code in script tag in head section.
<script type="text/javascript">
$(document).ready(function(){ $('#btnValidate').click(function(){ if($('#txtName').val().trim().length==0) alert('Please enter your name.'); }); }); </script>
Full Code :-
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btnValidate').click(function(){
if($('#txtName').val().trim().length==0)
alert('Please enter your name.');
});
});
</script>
</head>
<body>
Name:<input type="text" Id="txtName"/>
<input type="button" value="Validate" Id="btnValidate">
</body>
</html>
Screenshots:-
Output:-
No comments:
Post a Comment