Kendo Validator shows "title" attribute value as Required message

9 posts, 1 answers
  1. Alex
    Alex avatar
    11 posts
    Member since:
    Nov 2015

    Posted 24 Apr 2016 Link to this post

    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

  2. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1502 posts

    Posted 27 Apr 2016 Link to this post

    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
  3. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1502 posts

    Posted 27 Apr 2016 Link to this post

    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
  4. Alex
    Alex avatar
    11 posts
    Member since:
    Nov 2015

    Posted 03 May 2016 in reply to Danail Vasilev Link to this post

    Hello Danail,

    Thanks, it's working now.

    Best,
    Alex

  5. Jesper
    Jesper avatar
    3 posts
    Member since:
    Dec 2012

    Posted 22 Oct 2018 in reply to Danail Vasilev Link to this post

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

     

  6. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1187 posts

    Posted 24 Oct 2018 Link to this post

    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.
  7. Jesper
    Jesper avatar
    3 posts
    Member since:
    Dec 2012

    Posted 24 Oct 2018 in reply to Veselin Tsvetanov Link to this post

    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

     

     

  8. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1187 posts

    Posted 25 Oct 2018 Link to this post

    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.
  9. Jesper
    Jesper avatar
    3 posts
    Member since:
    Dec 2012

    Posted 25 Oct 2018 in reply to Veselin Tsvetanov Link to this post

    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

     

Back to Top