Validate TextBox on FocusOut (Blur) without using Buttons using JavaScript or jQuery

Last Reply on Feb 26, 2016 03:10 AM By dharmendr

Posted on Feb 25, 2016 11:17 PM

hi i want validate my registration page ...without onclick or onsubmit function i validate each textbox...i am using external js.how to i call that function? instead of onclick or onsubmit ?

Posted on Feb 26, 2016 03:10 AM Modified on on Feb 26, 2016 03:10 AM

Hi lavanya,

You have to do something like below.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#txtFirstName').focus();
            $('.Validate').on('blur', function (elements) {
                var element = $(this)[0];
                if (element.value == "") {
                    alert("Required!");
                }
                else {
                    //do your stuff.
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td align="right">
                    First Name:
                </td>
                <td>
                    <input name="txtFirstName" type="text" id="txtFirstName" class="Validate" placeholder="First Name" />
                </td>
            </tr>
            <tr>
                <td align="right">
                    Last Name:
                </td>
                <td>
                    <input name="txtLastName" type="text" id="txtLastName" class="Validate" placeholder="Last Name" />
                </td>
            </tr>
            <tr>
                <td align="right">
                    Gender:
                </td>
                <td>
                    <input name="txtGender" type="text" id="txtGender" class="Validate" placeholder="Gender" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>
Demo