ASP.Net AJAX ValidatorCallOutExtender Example with RequiredField and RegularExpression Validators

Using ValidationCallout Extender

HTML

<cc1:ToolkitScriptManager runat="server">
</cc1:ToolkitScriptManager>
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td style="width: 200px; height: 50px;">
            <asp:TextBox ID="txtEmail" Width="200px" Height="40px" CssClass="form-control" runat="server"> </asp:TextBox>
        </td>
    </tr>
    <tr>
        <td style="width: 215px; height: 10px;">
            <asp:RequiredFieldValidator runat="server" ID="rfvMail" ToolTip="Enter Email-ID"
                ForeColor="Red" Display="None" ErrorMessage="Enter Email-ID" ControlToValidate="txtEmail"></asp:RequiredFieldValidator>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ErrorMessage="Enter Valid Email ID"
                ValidationGroup="vgSubmit" ControlToValidate="txtEmail" CssClass="requiredFieldValidateStyle"
                ForeColor="Red" Height="16px" Display="None" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
            <cc1:ValidatorCalloutExtender runat="server" TargetControlID="RegularExpressionValidator2">
            </cc1:ValidatorCalloutExtender>
            <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="rfvMail">
            </cc1:ValidatorCalloutExtender>
        </td>
    </tr>
</table>
<asp:Button Text="Save" runat="server" />

Screenshot 

JavaScript

This will print error message inside TextBox

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td style="width: 200px; height: 50px;">
            <asp:TextBox ID="txtEmail" Width="200px" Height="40px" onchange="ValidateEmail()"
                CssClass="form-control" runat="server"> </asp:TextBox>
        </td>
    </tr>
</table>

 Script

<script type="text/javascript">
    function IsValidEmail(email) {
        var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
        return expr.test(email);
    };
    function ValidateEmail() {
        var email = document.getElementById("txtEmail").value;
        if (!IsValidEmail(email)) {
            document.getElementById("txtEmail").value = "Invalid Email";
        }
        else {
        }
    }
</script>

Screenshot