Search code examples
javascriptasp.net-mvc-4customvalidator

Custom Validator - Error message does not display on front end


I am trying to use a CustomValidator to validate entering of a string - po box

Basically, I want the users to avoid typing their postal address in address box for which I have written a function with the regular expression. But the problem is that the error message does not appear though it triggers the function. (I know this because I checked this by placing breakpoints in my Javascript function using Chome developer tools.)

Below is my .ascx file code.

<div class="clearfix">
     <asp:Label ID="lblAddress" runat="server" Text="Address" AssociatedControlID="txtAddress"
     class="formlabel firstfocus"></asp:Label>

     <div class="input">
       <asp:TextBox ID="txtAddress" runat="server" CssClass="large" MaxLength="80"></asp:TextBox>

          <asp:RequiredFieldValidator ID="valAddress" runat="server" ControlToValidate="txtAddress"
            CssClass="error-block" Display="Dynamic" ErrorMessage="<p>Address is required</p>"
            SetFocusOnError="True"></asp:RequiredFieldValidator>

           <asp:CustomValidator ID="valAddressPOBOX" runat="server" EnableClientScript="true" ValidateEmptyText="true" ErrorMessage="<p>Cannot contain a PO Box number</p>" ClientValidationFunction="AddressPOBoxValidation" ControlToValidate="txtAddress" Display="Dynamic" SetFocusOnError="True"></asp:CustomValidator>                                    

      </div>
</div>

The RequiredFieldValidator triggers the error message.

Below is the screenshot showing error message triggered from RequiredFieldValidator

enter image description here

With CustomValidator the trigger happens but the error message does not come up. I have checked on other CustomValidators on the same ascx page and made sure this one has properties no different from them, but still, if I am missing on any visibility property, feel free to correct me.

Below are 2 screenshots to show how the effect of CustomValidator takes place.

Before entering po box

enter image description here

After entering po box (Notice how the gap between address and address 2 increases.)

enter image description here

Coming on to the Javascript side, below is the function

function CheckPOBOXAddress(address) {
    var poboxPattern = /(p\.?\s?o?\.?\s?b\.?(ox)\.?(\s|[0-9])?|post\soffice)/i;


    if (poboxPattern.test(address))
        return true;
    else
        return false;
}

function AddressPOBoxValidation(sender, args) {
    var address = args.Value;

   if (CheckPOBOXAddress(address)) {
        args.IsValid = false;
        return;
    } 

    args.IsValid = false;
}

Solution

  • I have found a solution to my problem.After days of trial, error and research this worked for me:

    <asp:CustomValidator ID="CustomAddressValidator" runat="server" ClientValidationFunction="CheckAddressValidation" ControlToValidate="txtAddress" CssClass="error-block" Display="Dynamic" SetFocusOnError="True">Cannot contain a PO Box number</asp:CustomValidator>
    

    Also I modified my Javascript into a single function :

    function CheckAddressValidation(sender, args) {
        var address = args.Value;
        var addressPattern = /(p\.?\s?o?\.?\s?b\.?(ox)\.?(\s|[0-9])?|post\soffice)/i;
        if (addressPattern.test(address)) {
            args.IsValid = false;
            return;
        }
        args.IsValid = true;
    }
    

    Lesson - The other part of the CreateProfile.ascx file has Custom Validator in the same format as I posted originally. My superiors feel that Microsoft has done some changes to this probably that is why putting an error message in ErrorMessage tag does not seem to work. Feel free to correct me if I am wrong somewhere. But if you're someone who is stuck in a similar situation, my solution should help.