CustomValidator not showing error message from javascript

Question

I am practising client side validations with server side. I have written a code in client side to validate name and it is returing the value. But problem is that for incorrect values the error message is not displaying as soon as focus lost from the text box. My implementation is as:

Updated

 <script type="text/javascript">
    function validateText(osrc, args) {
        var textvalue = args;
        var pattern = /^[a-zA-Z.]{3,25}$/
        if (textvalue != null || textvalue != "") {
            if (pattern.test(textvalue)) {

                args.isValid = true;
            }
            else
                args.isValid = false;
        }
        else args.isValid = false;
        return;
    }
</script>

and aspx page contents are

<asp:TextBox runat="server" ID="txtFirstName" CssClass="form-control" />
            <asp:CustomValidator runat="server" Display="Dynamic" CssClass="text-danger"
                 ControlToValidate="txtFirstName" ToolTip="Incorrect Text" ErrorMessage="*"
                 EnableViewState="false" ValidateEmptyText="true" EnableClientScript="true"
                 Enabled="true" ClientValidationFunction="validateText"></asp:CustomValidator>//This validator is not showing the error message 

What's wrong with it, help required.

Answer 1

You must set the value of args.IsValid to TRUE or FALSE instead of just returning true/false. Also you need to use args.Value (notice V is uppercase) to set textvalue correctly. And you are only supposed to RETURN IF/WHEN the expression is valid:

JavaScript:

function validateText(osrc, args) {
    var textvalue = args.Value; //notice V is uppercase!
    var pattern = /^[a-zA-Z.]{3,25}$/
    if (textvalue != null || textvalue != "") {
        if (pattern.test(textvalue)) {
            args.IsValid = true;
            return; //notice we ONLY return when the expression IS valid
        }
        args.IsValid = false;
    }
    args.IsValid = false;
}

ASPX:

<div class="col-md-10">
    <asp:Label ID="Label1" runat="server" AssociatedControlID="txtFirstName" 
               CssClass="col-md-2 control-label">First Name</asp:Label>
    <asp:TextBox runat="server" ID="txtFirstName" CssClass="form-control" />
    <asp:CustomValidator ID="CustomValidator1" runat="server" 
                         Display="Dynamic" ControlToValidate="txtFirstName" 
                         ToolTip="Incorrect Text" ErrorMessage="*" 
                         EnableViewState="false" 
                         ValidateEmptyText="true" 
                         EnableClientScript="true" 
                         Enabled="true" 
                         ClientValidationFunction="validateText">
        Please input a valid First Name!
    </asp:CustomValidator>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"  
                                ControlToValidate="txtFirstName"
                                CssClass="text-danger" 
                                ErrorMessage="First name is required" 
                                ToolTip="First name is required." 
                                EnableViewState="False" />
</div>