Search

Sunday, September 6, 2015
0 comments

JQuery TextBox validation when it empty

7:20 PMSunday, September 6, 2015
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>
Protected by Copyscape Online Copyright Protection Software

0 comments :

Post a Comment

 
Toggle Footer
Top