Kendo Validator shows "title" attribute value as Required message

[Alex]

Hi everyone,

I've got a ComboBox where I wanted to get tooltip on hover. I did it like the following:

@(Html.Kendo().ComboBoxFor(m => m)
          .Filter("contains")
          .Placeholder(ViewData.ModelMetadata.DisplayName)
          .DataTextField("Definition")
          .DataValueField("Code")
          .HtmlAttributes(new { style = "width: 100%", id = fieldname, title= "Some example"})
          .BindTo((System.Collections.IEnumerable)ViewData[bindto]))

When I hover the mouse on the ComboBox, it shows "Some example" but the real problem is where Kendo Validator message is also showing "Some example", before this I was getting like: This field is required. How can I fix this so it doesn't mix up the Title value with the required field message?

 

Thanks,

Alex

[Danail Vasilev]

Hello Alex,

I wasn't able to reproduce the mentioned issue. A short video test is available here - http://screencast.com/t/DL4Ryci6p for your reference. I have modified the ComboBox / Server filtering demo like that:

<div class="demo-section k-content">
    <h4>Find a product</h4>
    <form id="ticketsForm">
        @(Html.Kendo().ComboBox()
          .Name("products")
          .Placeholder("Select product")
          .DataTextField("ProductName")
          .DataValueField("ProductID")
          .HtmlAttributes(new { style = "width:100%;" })
          .Filter("contains")
          .AutoBind(false)
          .MinLength(3)
          .HtmlAttributes(new { required = "required", data_required_msg = "Select start time", style = "width: 220px", title="combo title" })
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("GetProducts", "Home");
              })
              .ServerFiltering(true);
          })
    )

        <br />
        <input type="button" name="name" value="click" onclick="triggerValidation(); return false;" />
    </form>
</div>

<script>
    function triggerValidation() {
        var validator = $("#ticketsForm").kendoValidator().data("kendoValidator");
        validator.validate();
    }
</script>

If you are not using the latest Kendo UI version - 2016.1.412, does upgrading to it help? Otherwise it would be better to reproduce the issue with the code above and then tell us what changes you have made, so that we can proceed further with the investigation.

Regards,
Danail Vasilev
Telerik

[Danail Vasilev]

Hello Alex,

I wasn't able to reproduce the mentioned issue. A short video test is available here - http://screencast.com/t/DL4Ryci6p for your reference. I have modified the ComboBox / Server filtering demo like that:

<div class="demo-section k-content">
    <h4>Find a product</h4>
    <form id="ticketsForm">
        @(Html.Kendo().ComboBox()
          .Name("products")
          .Placeholder("Select product")
          .DataTextField("ProductName")
          .DataValueField("ProductID")
          .HtmlAttributes(new { style = "width:100%;" })
          .Filter("contains")
          .AutoBind(false)
          .MinLength(3)
          .HtmlAttributes(new { required = "required", data_required_msg = "Select start time", style = "width: 220px", title="combo title" })
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("GetProducts", "Home");
              })
              .ServerFiltering(true);
          })
    )

        <br />
        <input type="button" name="name" value="click" onclick="triggerValidation(); return false;" />
    </form>
</div>

<script>
    function triggerValidation() {
        var validator = $("#ticketsForm").kendoValidator().data("kendoValidator");
        validator.validate();
    }
</script>

If you are not using the latest Kendo UI version - 2016.1.412, does upgrading to it help? Otherwise it would be better to reproduce the issue with the code above and then tell us what changes you have made, so that we can proceed further with the investigation.

Regards,
Danail Vasilev
Telerik

[Alex]

Hello Danail,

Thanks, it's working now.

Best,
Alex

[Jesper]

I have the same problem. And I can help you reproduce the problem.

If you change the data_required_msg with data_val_required then the title is shown in the error message box.

I have solved the data_required_msg -> data_val_required mapping using this but it does not work when a title is atteched to the input field.

required: function (input) {
                    if (input.attr("data-val-required")) {
                        return input.attr("data-val-required");
                    }
                    return "";
                },

[Veselin Tsvetanov]

Hi Jasper,

The Kendo Validator will look for a custom message definition on a per-component basis via the following attributes order-wise:

1. data-[rule]-msg, where [rule] is the failing validation rule.
2. validationMessage
3. title

In the discussed case the [rule] part should be substituted with required​ resulting in an attribute named ​data-required-msg. This is the proper attribute which value will always be taken with precedence over the title attribute.

Further information on the discussed matter could be found in our documentation.

Regards,
Veselin Tsvetanov
Progress Telerik

[Jesper]

Hi Veselin

I have read the documentation reguarding the validator messages.

But when does this fit in this?

messages: {

                required: function (input) {
                    if (input.attr("data-val-required")) {
                        return input.attr("data-val-required");
                    }
                    return "";
                },
            },

this works with no title, but not with a title.

I'm using Asp.net Mvc DataAnnotation for validation which adds the data-val-required attribute. How do I change this to data-required-msg?

 

Reguards 

Jesper

 

 

[Veselin Tsvetanov]

Hello Jesper,

Attached you will find a small sample using the DataAnnotations and the Kendo Validator in an MVC project. While testing it at my end, the DataAnnotations messages are displayed properly in the warning tooltips created by the Kendo Validator.

May I ask you to modify the attached so it reproduces the issue observed at your end and send it back to us?

Regards,
Veselin Tsvetanov
Progress Telerik

[Jesper]

Hi Veselin

 

I seem to have solved the problem.

In my String.cshtml template i had the following lines

@{
    Dictionary<string, object> attrs = new Dictionary<string, object>();

    attrs.Add("title", ViewData.ModelMetadata.Description);

...


    if (ViewData.ModelMetadata.IsRequired)
    {
        attrs.Add("required", "");
    }
}
                <label for="@ViewData.ModelMetadata.PropertyName">
                    <span>@ViewData.ModelMetadata.DisplayName</span>
                    <span class="k-invalid-msg" data-for="@ViewData.ModelMetadata.PropertyName"></span>
                </label>

            @(Html.Kendo().TextBoxFor(m => m)
                  .Name(ViewData.ModelMetadata.PropertyName)
                  .Value(Model)
                  .HtmlAttributes(attrs))

 

If I removed the

if (ViewData.ModelMetadata.IsRequired)
    {
        attrs.Add("required", "");
    }

 

then the validator works perfect