Validator Not Showing EmailAddress Attribute Error Message

[John]

I'm using the Kendo Validator on a Razor Page in a .NET 7 project.  I've defined an error message for the EmailAddress attribute on the page model but the Kendo Validator is not using it.  I'm using Telerik UI For ASP.NET Core UI version 2022.3.1109.

page model

[DisplayName("Email"), StringLength(256, ErrorMessage = "Email must be no larger than 256 characters"), DataType(DataType.EmailAddress), EmailAddress(ErrorMessage = "Please enter a valid email address")]
public string? EmailAddress { get; set; }

razor

<label asp-for="Input.EmailAddress"></label><br/>
<input asp-for="Input.EmailAddress" class="form-control-large input-rounded"/>
<span asp-validation-for="Input.EmailAddress" class="text-danger"></span>

javascript

var validator = $("#editLocationForm").kendoValidator().data("kendoValidator");

function validateSave() {
    if (validator.validate() || validator.errors().length === 0) {
        $('#editLocationForm').submit();
        $("#SaveConfirmationWindow").data("kendoWindow").close();
    } else {
        bootstrapWarningMessage("There was an error saving.  Please correct the errors and try again.");
    }
    window.scrollTo(0, 0);
    return true;
}

I would expect to see the error message from the attribute -> "Please enter a valid email address".

What I'm getting instead -> "Input.EmailAddress is not valid email".  

Any idea how I can get this to display the error message from the attribute?  I have Required and StringLength attributes that are properly displaying the attribute error message so maybe a bug with the EmailAddress attribute?

 

 

[Alexander]

Hi John,

Thank you for reaching and for taking the time to share the relevant configuration that is used on your premises that further depicts the observed issue, it is greatly appreciated.

Upon my initial observations, Indeed it seems that the Validator component internally serializes the Error Message, particularly for the "EmailAddress' using its built-in messages which can be observed within the console. For example:

Thus, I will reach out to our respective developer's team fur further analysis regarding the matter. And will get back to you as soon as I have further intel from them.

In the meantime, a possible suggestion would be to explicitly override the validator's messages, particularly for the "email" input types on the client side. For example:

$(document).ready(function(){
       var validator = $("#editLocationForm").kendoValidator({
            messages:{
                email:"Custom Email Validation"
            }
       });
})

Or, alternatively, implement a custom Data Annotation attribute that derives from the ValidationAttribute and implements the IClientValidatable interface similarly to how it is illustrated within the following documentation segment:

• Implementing Custom Attributes

In addition, I also notice that the validator is instantiated multiple times which may cause disruption within the current validation workflow as well. Hence, it is important that the validator is first instantiated and afterward referenced.

Here is an example:

<input id="autocomplete" />
<script>
    // Initialization code here...
    $("#autocomplete").kendoAutoComplete(["Apples", "Oranges", "Grapes"]);

    // ...
    // Correct: the instance reference is obtained:
    var autocomplete = $("#autocomplete").data("kendoAutoComplete");

    // INCORRECT: The instance reference is obtained while creating a duplicate instance:
    var duplicate = $("#autocomplete").kendoAutoComplete().data("kendoAutoComplete");
</script>

Thank you for your patience and cooperation, in advance.

Kind Regards,
Alexander
Progress Telerik

[Alexander]

Hi John,

I would personally like to thank you for your patience regarding the matter, it is not taken for granted. I have received further word from our developer's team and it appears that the sporadic behavior could potentially stem from the fact that the ASP.NET Core framework itself has changed the format of the serialized form tag within the DOM when it comes to the utilization of "data-*" attributes particularly for email type inputs.

In this regard, the team agrees that this is a valid enhancement that should be integrated particularly when the [EmailAddress] Data Annotation is utilized.

Thus, I have logged an issue to expose the ability to provide a custom error message for an arbitrary email field that can be found here:

• https://github.com/telerik/kendo-ui-core/issues/7158

As a workaround, I'm afraid I cannot suggest a different one from the one previously provided.

That being said, for helping us address this matter, I have also updated your Telerik points as a token of gratitude.