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>

Comments

Popular posts from this blog

difference between structure and union in C Language

Difference between Linear search and Binary Search in c language

Difference between static and dynamic websites