This is a migrated thread and some comments may be shown as answers.

Kendo Validator shows "title" attribute value as Required message

8 Answers 1469 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 25 Apr 2016, 02:06 AM

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

8 Answers, 1 is accepted

Sort by
0
Accepted
Danail Vasilev
Telerik team
answered on 27 Apr 2016, 07:24 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Danail Vasilev
Telerik team
answered on 27 Apr 2016, 07:24 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Alex
Top achievements
Rank 1
answered on 04 May 2016, 12:34 AM

Hello Danail,

Thanks, it's working now.

Best,
Alex

0
Jesper
Top achievements
Rank 1
answered on 22 Oct 2018, 10:48 AM

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 "";
                },

 

0
Veselin Tsvetanov
Telerik team
answered on 24 Oct 2018, 06:25 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Jesper
Top achievements
Rank 1
answered on 24 Oct 2018, 06:42 AM

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

 

 

0
Veselin Tsvetanov
Telerik team
answered on 25 Oct 2018, 02:04 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Jesper
Top achievements
Rank 1
answered on 26 Oct 2018, 02:24 AM

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

 

Tags
General Discussions
Asked by
Alex
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Alex
Top achievements
Rank 1
Jesper
Top achievements
Rank 1
Veselin Tsvetanov
Telerik team
Share this question
or