JQuery TextBox validation when it empty

Introduction

In this article i will show you, how to check whether textbox is empty or not. If textbox is empty then get alert message on browser screen. I display this message in different style like if TextBox is display this message in different style like if TextBox is empty then get border color of TextBox is red or get alert message on screen. Both things we will do in the example on button click or focusout.

Description
In previous article i explained get radio button and CheckBox value, Show popup on page load, Text zoomIn or ZoomOut using JQuery.

Source code: If TextBox is empty then get alert message and cursor focus to TextBox

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function () {

$("#Button1").click(function () {
var textval = $("input[name='t1']").val();
if (textval == '')
alert("TextBox empty");
$("#Text1").focus();

});

})
</script>
</head>
<body>

Enter Name : <input id="Text1" type="text" value="" name="t1" /><br/>
<input id="Button1" type="button" value="validate" />

</body>
</html>

Source Code : If Textbox is empty and user want to focus out the box

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function () {
$("#Text1").focusout(function () {
var textval = $("input[name='t1']").val();
if (textval == '')
alert("TextBox empty");
$("#Text1").focus();
});

})
</script>
</head>
<body>
Enter Name : <input id="Text1" type="text" value="" name="t1" /><br/>
<input id="Button1" type="button" value="validate" />

</body>
</html>

Source Code : If TextBox is empty then change the border color of TextBox

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function () {

//$("#Button1").click(function () {
$("#Text1").focusout(function () {
var textval = $("input[name='t1']").val();
if (textval == '')
alert("TextBox empty");
//$("#Text1").focus();
$("#Text1").css("border-color", "red");
});
//});

})
</script>
</head>
<body>
Enter Name : <input id="Text1" type="text" value="" name="t1" /><br/>
<input id="Button1" type="button" value="validate" />
</body>
</html>