How can I rewrite the ErrorMessage for a CustomValidator control on the client?

Question

I have a CustomValidator that is validating a telephone number for several different telephone numbering schemes. The client-side javascript looks like this:

validatePhoneNumber(sender, args) {
    cleanNumber = args.Value.replace(/\D/, "");
    country = $("#" + CountryID).get(0).value;
    switch (country) {
        case "North America":
            args.IsValid = validateNAPhoneNumber(cleanNumber);
            if (!args.IsValid) sender.errormessage = "* Not a NA Phone #";
            break;
        case "UK":
            args.IsValid = validateUKPhoneNumber(cleanumber);
            if (!args.IsValid) sender.errormessage = "* Not a UK Phone #";
            break;
...
    }
}

The actual validation takes place properly, and the CustomValidator has the correct IsValid property at all times. The sender.errormessage, however, seems to be rewritten just after this function call to it's default value. How can I change the errormessage value, and make it "stick"?

score 4 · Answer 1 · edited Oct 06 '16 at 20:22

function dateofbirth(sender, args) {

    var dtcDOB = document.getElementById('<%= dtcDOB.ClientID %>');

    var dob = new Date(dtcDOB.value);
    var currDate = new Date();

    if (dtcDOB.value == "") {
        args.IsValid = false;
        sender.textContent = "Provide DOB.";
        return;
    }

    args.IsValid = true;
}

Try sender.textContent = "your err msg". It worked for me.

score 3 · Answer 2 · edited Jul 25 '15 at 12:05

3

The best way to change the error message of a validator control with image is:

sender.innerHTML = "YOUR HTML WITH ANYTHING COME HERE"

edited Jul 25 '15 at 12:05

Falko

17,076
13
60
105

answered Jun 13 '12 at 04:47

Satyavir Yadav

31
2

Note that if the error message is dynamic then HTML could be injected. Use `textContent` if you don't want HTML to be rendered. – mbomb007 Oct 06 '16 at 18:10

score 3 · Answer 3 · edited Jul 25 '15 at 12:06

3

To change the error message, do it like this:

if (!args.IsValid) document.getElementById('<%= cstPhoneNumber.ClientID %>').errormessage = "* Not a NA Phone #";

To change the text, do this:

if (!args.IsValid) document.getElementById('<%= cstPhoneNumber.ClientID %>').innerHTML = "* Not a NA Phone #";

cstPhoneNumber should be replaced by the name of your validation control.

edited Jul 25 '15 at 12:06

Falko

17,076
13
60
105

answered Nov 22 '09 at 22:40

Andy West

12,302
4
34
52

score 2 · Answer 4 · edited Jul 25 '15 at 12:07

2

It looks like your using jquery so you could set the error message like this:

$(sender).text("* Not a NA Phone #");

Edit:

Sorry for the delay but I was away on vacation.

I was playing a round with a simple page and I think I understand how this works.

When you set the errormessage on the sender in the client side validation function you are setting the equivalent of the ErrorMessage property. This is different from the Text property. The ErrorMessage sets the text displayed in the Validation summary, while the Text property is the text displayed in the validator control. Note that if you only set the ErrorMessage property (on the server) then the ErrorMessage will be copied into the Text property.

What this means is that when you set sender.errormessage your actually setting the text that is displayed in the validation summary.

Hopefully this will help clear it up. However, I still haven't seen a way to change the Text property from the client side validation function. I am also not sure why your sender object is not the validator object.

edited Jul 25 '15 at 12:07

Falko

17,076
13
60
105

answered Aug 05 '09 at 01:09

drs9222

4,448
3
33
41

Tried that, but no. Digging around, I find that the sender is not the span element, but is instead some other DOM object that doesn't display anything. Thanks, though. – Dustman Aug 05 '09 at 18:37
That's odd when I tried this at home the sender was the span. How was the sender object related to the span? You may be able to access the span from the sender. If not do you have a way to get the id of the span in your script? If so you could still do this. Sorry I can't be more helpful at the moment as I am at work. – drs9222 Aug 05 '09 at 19:31
A number of websites state that the "sender.errormessage" construct is the way to do this, so I suspect that I have done something wrong in the grander scheme of things that is preventing any of these methods from working. I guess I'll have to code up a test page and see if a simpler version doesn't act the way everyone seems to expect. – Dustman Aug 05 '09 at 19:45

score 1 · Answer 5 · edited Jul 25 '15 at 12:07

1

sender.innerText = "Your message" will work.

edited Jul 25 '15 at 12:07

Falko

17,076
13
60
105

answered Jul 28 '10 at 00:16

Karthik

11
1

score 0 · Answer 6 · answered Aug 05 '09 at 02:15

0

I think the problem is that there is no 'errormessage' property on the client side. The custom validator renders a <span> tag to display the error message with an id corresponding the id property of the custom validator control. To set the text displayed when validation fails you need to do somthing like this.

... 
case "North America":
    args.IsValid = validateNAPhoneNumber(cleanNumber);
    if (!args.IsValid) 
        document.getElementById(sender.id).innerText = "* Not a NA Phone #";
    break;
...

answered Aug 05 '09 at 02:15

Phaedrus

8,351
26
28

1

Doesn't `document.getElementById(sender.id)` equal `sender`? – drs9222 Aug 05 '09 at 02:42
That is actually how I started out doing this, and that didn't work either. As it happens, the js sender.errormessage member does have the same content as the CustomValidator.ErrorMessage when the page first loads, but altering that content does not alter the displayed message. – Dustman Aug 05 '09 at 18:35

score 0 · Answer 7 · edited Jul 25 '15 at 12:08

0

Expanding @Andy response, using jQuery:

Change the text message (show in the form):

$('#<%=this.[Validator].ClientID%>').text('Text to show');

Change the error message (for the Summary control):

$('#<%=this.[Validator].ClientID%>').attr('errormessage', 'Text to show');

Replace [Validator] for your validator's name.

edited Jul 25 '15 at 12:08

Falko

17,076
13
60
105

answered Nov 01 '13 at 15:59

dchumpitaz

71
7

score 0 · Answer 8 · answered Apr 21 '10 at 19:42

Just remove all instances of Text and ErrorMessage in the custom validator tag definitions then use

$(#id_of_custom_validation_control).text("custom error message");

Then with this, you can use one custom validator control and handle multiple error conditions

E.g

if(error1){
  $(#id_of_custom_validation_control).text("custom error message1");
}else $(#id_of_custom_validation_control).text("custom error message2");

Hope this helps

score 0 · Answer 9 · answered Sep 23 '16 at 19:23

Try this...

Use sender.textContext in the Javascript for the error message and setup your CustomValidator as such:

<asp:CustomValidator ID="cvdPhoneNumber" runat="server" Display="Dynamic" ForeColor="Red" ControlToValidate="txtPhoneNumber" ClientValidationFunction="validatePhoneNumber" ErrorMessage=""  />

How can I rewrite the ErrorMessage for a CustomValidator control on the client?

9 Answers9

Edit:

Linked